v-if :判断是否隐藏
- v-if 可以判断一个属性 的长度 或 是否true 等等 来进行控制隐藏显示 可以结合 v-else 来使用 注意:使用v-else 必须要有v-if
- 如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)。
<div v-if="list.lenght > 0"> v-if </div>
<div v-else> v-else </div>
v-for:数据循环
- v-for循环普通数组
//item代表是循环的值 , index代表是每一项 也可以说是下标 :key 代表标识
<div v-for="(item,index) in list" :key="index">
<p>{{ item }}</p>
</div>
v-bind:class:绑定一个属性
最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染)
:class="{ 'active': isActive }"
判断是否绑定一个active
:class="{'active':isActive==-1}"
或者
:class="{'active':isActive==index}"
v-model:实现数据双向绑定
<input type="text" v-model="search">
data(){
search:''
}
运行结果:
v-show:判断隐藏显示
<div v-show="show">v-show</div>
// true 显示 false 隐藏
data () {
return {
show:false,
}
},
这里重点说明一个v-if和v-show的区别:
共同点:都是通过判断绑定数据的true/false来展示的
不同点:v-if只有在判断为true的时候才会对数据进行渲染,如果为false代码删除。除非再次进行数据渲染,v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。
v-show是无论判断是什么都会先对数据进行渲染,只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下,改变数据的值可以使数据展示或隐藏