vue dom 中的 v-for 还有 v-if
有没办法, v-if 某条件时,终止 v-for,不再循环下去了
不推荐v-for与v-if同时使用，因为v-for的优先级较高，会先讲所有的dom渲染才会根据v-if去判断销毁，影响性能。想要达成你说所的效果，其中一个方法是可以对原始数据进行处理，将你最终需要渲染的数据先过滤出来，然后再赋值给v-for的数据源或变量。做法如下，可以在你最开始拿到原始数据的地方，对数据根据条件进行过滤，然后把新的数据赋值给v-for的数据源即可。
v-if 无法真正终止 v-for循环,可以写一个 computed ,在 computed 中生成一个新的数组,并用if设置终止条件
v-for循环这个新生成的数组即可
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="itme in eacharr"> {{ itme }} </li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
arr: [11, 22, 33, 44, 55, 66, 77, 88, 99]
},
computed: {
eacharr: function () {
var i = 0;
for (; i < this.arr.length; i++)
if (this.arr[i]==66) //终止条件
break;
return this.arr.slice(0,i);
}
}
});
</script>
</body>
</html>
建议过滤掉不需要的数据，剩下需要的数据再利用v-for循环遍历取出渲染
如果必须要一起，那数据里需要带个判断属性的值，类似如下
<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
}]
}
}