v-for循环，可以遍历值和下标。
v-for=''（vlaue,index）in对象名''
v-model 双向数据绑定 用于表单元素
v-model='' ''
v-on:绑定事件、v-on:事件名=''函数(方法)''
简写：@：事件名=''函数（方法）''
v-show:控制元素的显示或隐藏
v-show：是用display：none控制
v-if是用visibility：hidden控制
v-bind绑定属性
v-bind:属性名=''值''
图片切换
<body>
<div id='itany'>
<img v-bind:src=''url'' alt='' ''>
<ul>
<li v-for=''(value,index)in arr''@click='chg(index)'>{{index+1}}</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg',
arr:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
},
methods:{
chg:function(ind){
this.url=this.arr[ind]
}
}
})
</script>
</body>
v-show-v-if
<body>
<p>此内容可见</p>
<p>v-if此内容不可见</p>
<p>此内容可见</p>
<p>v-if此内容不可见</p>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
see:true
}
})
</script>
</body>
v-show
<div id='itany'>
<button @click='chg'>来回切换</button>
<div class='box' v-show=see></div>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
see:true
},
methods:{
chg:function(){
this.see=!this.see
}
}
})
</script>
v-bind
<div>
<img v-bind:src=''url'' alt='' '' @click=' chg '>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
url:'img/i.jpg',
hef:'img/2.jpg'
},
methods:{
chg:function(){
this.url=this.hef
}
}
})
</script>
网友评论