一：v-bind 将这个元素节点的 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>
练习：点击下面的数字更换对应的图片 应用了Vue中的v-bind、v-on
图片的路径是一个变量，当点击下面的数字时，当前arr的下标就是l,实现点击换图片的效果
效果：
<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>
网友评论