【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>