Vue常用的指令及用法

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;的操作。所以再不重新渲染数据的情况下，改变数据的值可以使数据展示或隐藏