心愿便利贴

习题链接

心愿便利贴

任务

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

关键点

  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>

__EOF__

本文作者GTK
本文链接https://www.cnblogs.com/DnmyCourage/p/17455538.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   GTK  阅读(55)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示