vue01

2018-09-11  本文已影响0人  暴打小乳猪

添加事件

<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只是看不到了,而它在文档流中占位,浏览器也会读取。

上一篇 下一篇

猜你喜欢

热点阅读