一、v-show
- 根据表达式的真假，切换元素的显示和隐藏
<body>
<div id="app">
<img src="../pictures/A-girl.jpg" alt="test" v-show="isShow">
<input type="button" value="改变布尔值" @click=changeTrue>
<img src="../pictures/A-boy.jpg" alt="test" v-show="age > 18">
<input type="button" value="年龄-1，当前19" @click=changeAge>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:true,
age:19,
},
methods:{
changeTrue:function(){
this.isShow = !this.isShow;
},
changeAge:function(){
this.age--;
},
}
})
</script>
</body>
二、v-if
- 根据表达式真假，切换元素的显示与隐藏（直接操纵DOM元素）
- 使用与v-show类似，区别：
- v-show实际上是将元素的display:none，
- v-if则是直接将元素从DOM树中移除；
- 频繁切换某节点，使⽤v-show(切换开销⽐较⼩，初始开销较⼤)，
- 不需要频繁切换某节点使⽤v-if（初始渲染开销较⼩，切换开销⽐较⼤）；
三、v-bind
- 作用、为元素绑定属性
- 写法、v-bind: 属性名，简写 : 属性名
例：
<body>
<div id="app">
<img :src="imgSrc" alt="test" :title="imgTitle">
<img :src="imgSrc" alt="test" :title="imgTitle">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc: "http://gmis.aust.edu.cn/pyxx/images/loginlogo.png",
imgTitle: "我是tiltle",
},
methods:{
}
})
</script>
</body>
- 也可绑定元素的class（常用在active）
例：
<body>
<div id="app">
<img :src="imgSrc" alt="test" :title="imgTitle"
:class="isActive?'active':''" @click="toggleActive">
<!-- 上面使用三元表达式，下面为对象的形式 -->
<img :src="imgSrc" alt="test" :title="imgTitle"
:class="{active:isActive}" @click="toggleActive">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc: "http://gmis.aust.edu.cn/pyxx/images/loginlogo.png",
imgTitle: "我是tiltle",
isActive:false,
},
methods:{
toggleActive:function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
效果：
四、实现图片轮播且上下键符合逻辑
<body>
<div id="app">
<img :src="imgArr[index]" alt="test">
<input type="button" value="上一张" @click="prv" v-show="index!=0">
<input type="button" value="下一张" @click="next" v-show="index<2">
</div>
<script>
var app = new Vue({
el: "#app",
data: {
index: 0,
imgArr: ["../pictures/loginlogo.png", "../pictures/A-boy.jpg", "../pictures/A-girl.jpg"]
},
methods: {
prv: function () {
this.index--;
},
next: function () {
this.index++;
}
}
})
</script>
</body>
效果：