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>