vue 中v-bind的运用以及制作选项卡
v-for=" "循环 v-model =" "双向数据绑定用于表单元素
v-on=" "事件名="函数名 绑定事件，简写@click=" "
v-bind: 绑定一个属性 v-bind:属性名=" "简写：属性名=" 值"
v-show=" " 控制元素的显示隐藏 display:none
v-if="" 控制元素的显示或隐藏 visibility:hidden;
逻辑运算符：&& 与 var a = 3 var b = 5
console.log(a>4&&b<10);//false
console.log(a>4||b<10);//true
|| 或
有假与为假，有真或为真
非 取反
<实现图片效果>
<body>
<div id='itany'>
<!-- <a href=""></a>-->
<img v-bind:src="url" alt="">
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg'
}
})
</script>
</body>
<选项卡 图片效果>
<div id='itany'>
<img v-bind:src="url" alt="">
<ul>
<li v-for="(value,index) in list" v-on:click='chg(index)'>{{index+1}}</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg',
list:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
},
methods:{
chg:function(ind){
this.url=this.list[ind]
}
}
})
</script>
<点击隐藏>
<script>
new Vue({
el:'#itany',
data:{
see:true
},
methods:{
chg:function(){
this.see=!this.see
}
}
})
</script>
