vue中v-for和v-if不能一起使用

在同一标签上，v-for和v-if不能一起使用，因为v-for的优先级大于v-if
这时候可以使用computed将数据过滤掉

<div v-for="(item) in arr" :key="item.id" v-if="item.isShow">
<h3>{{item.name}}</h3>
</div>
// 将isShow为false的不显示
data:{arr:[
{id:1,
name:"张三1",
isShow:true},
{id:2,
name:"张三2",
isShow:false},
{id:3,
name:"张三3",
isShow:false},
{id:4,
name:"张三4",
isShow:true},
]
}

更改如下：

<div v-for="(item) in filterArr" :key="item.id" v-if="item.isShow">
<h3>{{item.name}}</h3>
</div>
// 将isShow为false的不显示
data:{arr:[
{id:1,
name:"张三1",
isShow:true},
{id:2,
name:"张三2",
isShow:false},
{id:3,
name:"张三3",
isShow:false},
{id:4,
name:"张三4",
isShow:true},
]
}
computed:{filterArr(){return arr.filter(item=>item.isShow)}
}

vue中v-for和v-if不能一起使用相关推荐

Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
vue v html安全,vue 中控制v-html 中的样式，但不影响全局的小技巧
我们知道在 Vue 中,style可以用两种方式来导入: // method1 @import ('./a.css'); //method2 复制代码但是不管哪一种,导进的css文件都是应用于全局的 ...
Oracle 中一些主要的V$视图种类
Oracle 中一些主要的V$视图种类类别描述和相关的V$视图数据库实例有关实际数据库实例的信息 V$ 视图: V$ACTIVE_INSTANCES,V$BGPROCESS,V$DAT ...
关于v$process与v$session中process的理解(转载)
http://www.itpub.net/thread-1077321-1-1.html(出处) 关于v$process与v$session中process的理解说明 v$session有个proc ...
VCS视频学习中的一个例子代码：dff.v和dff_tb.v
前言 VCS课程中的一个例子! dff.v //r/dff_exp.v module dff_exp(//Inputsinput wire clk_i,input wire rst_l_i,input ...
在Mac中设置Ctrl+C/V进行复制/粘贴
在Mac中设置Ctrl+C/V进行复制/粘贴从Windows世界走入Mac世界,最让不习惯的是在Mac中"复制/粘贴"的快捷键是Command+C/V.而且Command键与C/ ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...
vue和react相同点_我在React和Vue中创建了相同的应用程序。这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
Vue 中 computed ,watch,methods 的异同
methods,watch和computed都是以函数为基础的. computed 和 watch 都可以观察页面的相应式数据的变化.当处理页面的数据变化时,我们有时候很容易滥用watch, 而通常更 ...

vue中v-for和v-if不能一起使用

vue中v-for和v-if不能一起使用相关推荐

最新文章

热门文章