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

Vue指令【2】

    • 显示切换与属性绑定
      • v-show指令
      • v-if指令
      • v-bind指令

显示切换与属性绑定

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>   

你可能感兴趣的:(前端基础,vue.js,前端,javascript)