v-if和v-for一起使用的几个方法
2024-10-22 05:00:05
方法一（推荐）：
不带if
<ul>
<li
v-for="(item, index) in list"
:key="index"
>
{{ item.title }}
</li>
</ul>
带if
<ul v-for="(item, index) in list" :key="index">
<li v-if="item.checked">{{item.title}}</li>
</ul>
data () { // 业务逻辑里面定义的数据
return {
todo: '',
list: [{
title: '111111',
checked: true
}, {
title: '22222',
checked: false
}]
}
}
方法二（通过计算属性）：过滤掉不需要的数据，剩下需要的数据再利用v-for循环遍历取出渲染
<h2>进行中</h2>
<ul>
<li v-for="(item, index) in todoList" :key="index">
<input type="checkbox">{{item.title}} ----- <button @click="removeData(index)">删除/button>
</li>
</ul>
<br>
<h2>已完成</h2>
<ul>
<li v-for="(item, index) in doneList" :key="index" >
<input type="checkbox">{{item.title}} ----- <button @click="removeData(index)">删除/button>
</li>
</ul>
data () { // 业务逻辑里面定义的数据
return {
todo: '',
list: [{
title: '111111',
checked: true
}, {
title: '22222',
checked: false
}]
}
}
computed: {
todoList: function() {
return this.list.filter(function (item) {
return item.checked
})
},
doneList: function() {
return this.list.filter(function(item) {
return !item.checked
})
}
}
最新文章
- VS2012 asp.net mvc 4 运行项目提示："错误消息 401.2。: 未经授权: 服务器配置导致登录失败"
- Eclipse自动调整格式
- Python成长笔记 - 基础篇 （五）
- Xamarin.Forms-VS安装调试错误
- mysql 省市联动sql 语句
- Struts2命令空间小结
- POJ2407(欧拉函数)
- linux_inode 和 block
- python学习之路网络编程篇（第五篇）-续篇
- 强大的测试管理工具---TestTrack Pro
- Python深度学习(Deep Learning with Python) 中文版+英文版+源代码
- An Overview of End-to-End Exactly-Once Processing in Apache Flink (with Apache Kafka, too!)
- 登录注册页面（连接MySQL8.0.15版本）
- OC协议、代理的简单使用
- C#窗体向另一个窗体实时传值及传值问题
- leetcode 443. String Compression
- vueJs的简单入门以及基础语法
- Spring Cloud常用组件介绍
- HDU 4640 状态压缩DP 未写完
- Halcon中xld的常见特征的含义总结