添加事件
<div class="you">
<input type="text" v-model="list">
<button v-on:click="nam">添加</button>
<ul>
<li v-for="(vel,index) in sg">{{vel}}<button v-on:click="men(index)">删除</button>
</li>
</ul>
</div>
new Vue({
el:'.you',
data:{
sg:['dd','hs','md'],
list:''
},
methods:{
nam:function(){
this.sg.push(this.list),
this.list=''
},
men:function(ind){
this.sg.splice(ind,1)
}
}
})
v-bind
<div class="you">
<img v-bind:scr="url" alt="" @click="chg">
</div>
new Vue({
el:'.you',
data:{
url:'img/1.jpg',
hef:'img/2.jpg'
},
methods:{
chg:function(){
this.url=this.hef
}
}
})
v-show/v-if
<div class="you">
<p>此内容可见</p>
<p v-show=!see>v-if此内容不可见</p>
<p>此内容可见</p>
<p v-if=!see>v-if此内容不可见</p>
</div>
new Vue({
el:'.you',
data:{
see:true
}
})
点击隐藏
<style>
.box{
width:30px;
height:30px;
background:red;
}
</style>
<div class="you">
<button @click="chg">点击隐藏</button>
<div class="box" v-show=see>
</div>
</div>
new Vue({
el:'.you',
data:{
see:true
},
methods:{
chg:function(){
this.see=!this.see
}
}
})
切换图片
<style>
ul{
overflow:hidden;
}
li{
width:600px;
text-align:center;
list-style:none;
border:1px solid black;
float:left;
}
</style>
<div class="you">
<img v-bind:src="url" alt="">
<ul>
<li v-for="(value,index) in arr" @click="chg(index)">{{index+1}}</li>
</ul>
</div>
new Vue({
el:'.you',
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]
}
}
})
display:none与visibility:hidden的区别
display:none是彻底隐藏了，不在文档流中占位，浏览器也不会读取。
visibility:hidden只是看不到了，而它在文档流中占位，浏览器也会读取。
网友评论