一：v-bind 將這個元素節(jié)點的 title 特性和 Vue 實例的 message 屬性保持一致
這個案例是點擊當前圖片會更換到另一張，更改的是圖片的src屬性
<body>
<div id="itany">
<img v-bind:src="s" alt="" v-on:click='dj'>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
s:'1.jpg',
h:'2.jpg'
},
methods:{
dj:function(){
this.s=this.h
}
}
})
</script>
</body>
二：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="itany">
<button v-on:click='yx'>點擊隱藏</button>
<div id="color" v-show=see></div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
see:true
},
methods:{
yx:function(){
this.see=!this.see
}
}
})
</script>
</body>
練習：點擊下面的數(shù)字更換對應的圖片 應用了Vue中的v-bind、v-on
圖片的路徑是一個變量，當點擊下面的數(shù)字時，當前arr的下標就是l,實現(xiàn)點擊換圖片的效果
效果：
<body>
<div id="itany">
<img v-bind:src="l" alt="">
<ul>
<li v-on:click='ht(index)' v-for='(value,index) in arr'>
{{arrs[index]}}
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
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]
}
}
})
</script>
</body>
