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)            }        }    })

效果图:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 框架集 框架集和内联框架的作用类似,都是用于在一个页面中引入其他的外部的页面框架集可以同时引入多个页面,而内联框架...
    沙子_32c6阅读 216评论 0 0
  • 那些诗与远方 以前小时候的诗还是高考必考,那时候的远方也不过是和家人争吵过后赌气的“高考后一定要去外地”。可是小时...
    郑宝圆阅读 197评论 0 1
  • 今天天气很好 1.停水第两天2.没气第二天3.或许过两天要停电了 这就是大二的酷比生活img18.jpg
    郑宝圆阅读 190评论 0 0
  • 学校里有一个小湖泊,里面有两只鸳鸯,两只天鹅,也有小的假山和瀑布,没有多美,于是也不曾细细观察。今天路过,看到了吸...
    人间有味似清欢清欢阅读 290评论 0 0
  • 人是不是都这样 没得到东西拼命想得到 每天想 得到了以后就觉得没什么呀 又开始想着没有的东西 我觉得自己真是书读的...
    aqiqi阅读 181评论 0 0