一：v-bind 将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致
这个案例是点击当前图片会更换到另一张，更改的是图片的src属性
body部分：
<div id="app">
<img v-bind:src="s" alt="" v-on:click='dj'>
</div>
js部分
new Vue({
el:'#app',
data:{
s:'1.jpg',
h:'2.jpg'
},
methods:{
dj:function(){
this.s=this.h
}
}
})
二：v-show&v-if控制切换一个元素是否显示
v-show:display:none v-if:visibility:hidden
<p v-show=see>可见</p>
<p v-show=!see>不可见</p>
<p v-if=!see>v-if不可见</p>
下面的案例讲的是点击这个button按钮隐藏红块，再点击显示红块，主要是判断true还是false
body部分
<div id="app">
<button v-on:click='yx'>点击隐藏</button>
<div id="color" v-show=see></div>
</div>
js部分：
new Vue({
el:'#app',
data:{
see:true
},
methods:{
yx:function(){
this.see=!this.see
}
}
})
QQ截图20180911174245.png
练习：点击下面的数字更换对应的图片 应用了Vue中的v-bind、v-on
图片的路径是一个变量，当点击下面的数字时，当前arr的下标就是l,实现点击换图片的效果
QQ截图20180911174552.png
body部分:
<div id="app">
<img v-bind:src="l" alt="">
<ul>
<li v-on:click='ht(index)' v-for='(value,index) in arr'>{{arrs[index]}}</li>
</ul>
</div>
js部分：
new Vue({
el:'#app',
data:{
arr:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'],
arrs:['1','2','3','4','5'],
l:'1.jpg'
},
methods:{
ht:function(ind){
this.l=this.arr[ind]
}
}
})