2018-09-13

1.v-if / v-show控制元素的显示隐藏

案例一：

body部分：

v-show此内容可见

v-show此内容不可见

v-if此内容可见

v-if此内容不可见

js部分：

newVue({        el:'#itany',        data:{            see:true}    })

效果图：

image

案例二、点击隐藏显示

css部分：

p{width:100px;height:100px;background:red;    }

body部分：

隐藏/显示

js部分

newVue({        el:'#itany',        data:{            see:true},        methods:{            alt:function(){this.see=!this.see            }        }    })

image

2.v-bind 绑定属性 v-bind:属性='值'，针对图片

案例一：

body部分：

js部分：

newVue({        el:'#itany',        data:{            url:'img/1.jpg',            hef:'img/2.jpg',            al:'img/3.jpg'},        methods:{            alt:function(){this.url=this.hefthis.hef=this.althis.al=this.url            }        }    })

效果图：

QQ图片20180911165047.png

案例二点击切换图片：

body部分：

{{index+1}}

js部分：

newVue({        el:'#itany',        data:{            url:'img/1.jpg',            arr:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg']        },        methods:{            chg:function(ind){this.url=this.arr[ind]            }        }    })

效果图：

QQ图片20180911170019.jpg

二、display:none与visibility:hidden的区别

display:none和visibility:hidden都能把网页上某个元素隐藏起来，

两者的区别:

display:none ---对象在页面上彻底消失，不在文档流中占位，浏览器也不会解析该元素

visiblility:hidden---视觉上消失，在页面中所占的空间没有改变，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素

三、添加删除水果列表案例

添加

{{value}}删除

newVue({        el:'#itany',        data:{            arr:['苹果','香蕉','橘子','鸭梨'],            arrs:''},        methods:{            alt:function(){this.arr.push(this.arrs),this.arrs=''},            add:function(ind){this.arr.splice(ind,1)            }        }    })

效果图：