vue01

添加事件

添加

• {{vel}}删除

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

new Vue({

el:'.you',

data:{

url:'img/1.jpg',

hef:'img/2.jpg'

},

methods:{

chg:function(){

this.url=this.hef

}

}

})

v-show/v-if

此内容可见

v-if此内容不可见

此内容可见

v-if此内容不可见

new Vue({

el:'.you',

data:{

see:true

}

})

点击隐藏

点击隐藏

new Vue({

el:'.you',

data:{

see:true

},

methods:{

chg:function(){

this.see=!this.see

}

}

})

切换图片

• {{index+1}}

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