心愿便利贴

习题链接

心愿便利贴

课程列表

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

关键点

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>