一：v-bind 將這個元素節(jié)點的 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控制切換一個元素是否顯示
<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
}
}
})
12039799-774ad61ffd031a03.png
練習：點擊下面的數(shù)字更換對應的圖片 應用了Vue中的v-bind、v-on
圖片的路徑是一個變量镐躲，當點擊下面的數(shù)字時贾漏，當前arr的下標就是l,實現(xiàn)點擊換圖片的效果
效果：
12039799-3e938a14f17d5bd0.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]
}
}
})
