JZTXT

心愿便利贴

发布时间 2023-06-04 12:47:29作者: GTK

习题链接

心愿便利贴

课程列表

现在我们有一扇门，这个门叫芝麻开门
我们要在输入框中输入芝麻开门，让门打开
这就是我们的主要任务

关键点

  1. 根据提示完成对应rules规则的编写
    1. 在el-form标签上使用 :rules="rules" 才能使规则生效
    2. 规则编写，form表单中的属性:[{填写规则的属性，设置属性值等}]
  2. v-for指令
    1. v-for指令语法 v-for="item,index in Array"
    2. 使用了v-for一定要加上:key="item.id",这个地方最好传入id（实在没有id，使用index也可以），因为使用index的话可能在进行diff算法进行比较的时候不会更新，导致页面显示的数据会出现错乱
    3. 本题没有涉及到这个key的问题，可以使用index
  3. element ui官网form表单链接

代码实现 && 完整的代码

  1. 完成规则填写
    data: {
    rules: {
        // TODO 待补充验证的代码
        name: [ { required: true,min: 2, max: 4, message: "长度在 2 到 4 个字符", trigger: "blur", } ],
        content: [ { required: true,min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur", } ] 
    }
}
  2. 完成渲染功能
    <div class="card" :class="item.css" v-for="(item,index) in wishList" :key="index" ></div>