【Vue】指令之显示切换，属性绑定

显示切换与属性绑定

v-show指令

作用：根据真假切换元素的显示状态

• 指令后的内容最终都会解析为布尔值
• 数据改变之后，对应元素的显示状态会同步更新

语法：

<div id="app"><img v-show="true" src="地址" ><img v-show="isShow" src="地址" ><img v-show="age>=18" src="地址" >
</div><script>var app = new Vue({el:"#app",data:{isShow:false,age:17}})</script>   

v-if指令

作用：根据表达式的真假切换元素的显示状态

与v-show指令不同的是，v-if操纵的是DOM元素，v-show操纵的是display样式。
因此，频繁的切换使用v-show，反之使用v-if，前者的切换消耗小

语法:

<div id="app"><p v-if="true">我是一个p标签</p><p v-if="isShow">我是一个p标签</p><p v-if="表达式">我是一个p标签</p>
</div><script>var app = new Vue({el:"#app",data:{isShow:false,}})</script>   

v-bind指令

作用：设置元素的属性（比如src,title,class）

• 简写可以省略v-bind，只保留:属性名
• 如果需要动态增删class建议使用对象的方式，更加简便

语法：

<div id="app"><img :src="imgSrc"><img :class="{active:isActive}"> // active的值是否生效取决于isActive
</div><script>var app = new Vue({el:"#app",data:{imgSrc:"图片地址",isActive:false}})</script>