例子
<div id="app">
<div v-for="item in arr" v-if="item.flag">
{{item.phone}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
arr:[
{
flag:true,
phone:'apple'
},
{
flag:false,
phone:'huawei'
},
{
flag:true,
phone:'vivo'
},
]
}
});
</script>
结果
apple
vivo
分析
v-if成功的前提是v-for遍历出数据
本文介绍了如何在Vue应用中使用v-if条件语句配合v-for循环,展示了如何根据flag属性筛选并显示数组中符合条件的phone值,即仅渲染带有flag标志的元素:apple和vivo。

被折叠的 条评论
为什么被折叠?



