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

three想当技术大佬2024-02-04 14:30

Vue指令【2】

- 显示切换与属性绑定

显示切换与属性绑定

v-show指令

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

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

语法：

html 复制代码

<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，前者的切换消耗小

语法:

html 复制代码

<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建议使用对象的方式，更加简便

语法：

html 复制代码

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