一、v-show
根据真假切换元素的显示状态。
注意：
1、原理是修改元素display，实现显示隐藏。
2、指令后面的内容，最终都会解释为布尔值。
3、值为true元素显示，值为false元素隐藏。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<img v-show="isShow" src="img/zhongqiu.jpg" alt="">
<input type="button" value="增加年龄" @click="addAge">
<img v-show="age>=18" src="img/zhongqiu.jpg" alt="">
</div>
<!-- 导入开发版本的Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:15
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
}
})
</script>
</body>
</html>
结果：
初始结果：
点击切换显示状态：
点击三次增加年龄：
二、v-if
根据表达式的真假切换元素的显示状态。
注意：
1、本质是通过操纵dom元素来切换显示状态。
2、表达式的值为true，元素存在于dom树中，为false，从dom树中移除。
3、频繁的切换使用v-show，反之使用v-if，前者的切换消耗小。实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示" @click="toggleIsShow">
<p v-if="isShow">哈哈哈 v-if</p>
<p v-show="isShow">哈哈哈 v-show</p>
<h2 v-if="temperature>=35">热死啦</h2>
</div>
<!-- 导入开发版本的Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
temperature:40
},
methods:{
toggleIsShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>
结果：
分析：
点击前：
点击后：
三、v-bind
设置元素的属性
注意：
1、完整写法是 v-bind：属性名。
2、简写的话可以直接省略 v-bind，只保留 ：属性名。
3、需要动态增删clss建议使用对象的方式。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.active{
border:10px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="" v-bind:title="imgTitle">
<br>
<!-- 三元表达式 -->
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
:class="isActive?'active':''" @click="toggleActive">
<br>
<!-- 对象方式，建议使用 -->
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
:class="{active:isActive}" @click="toggleActive">
</div>
<!-- 导入开发版本的Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"img/zhongqiu.jpg",
imgTitle:"中秋",
isActive:false
},
methods:{
toggleActive:function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
结果：
点击图片二或者图片三：