vue动态添加元素,为动态元素绑定点击事件。(根据个人业务记录)
需求:
- 返回一个list,首先显示list中某一个的一部分,然后可以点击一个图标,显示对应剩下的一部分。
思路:
- 手下想到的是用v-html标签对数据进行拼接,然后再绑定到dom中去。但是这样就涉及到动态添加属性,添加事件了,搜索看了一下觉得不太合适,就没用了。
- vue离不开数据驱动,决定从数据入手。
实现:
-
处理数据,将数组数据,转变为数据对象,在每一个对象中都添加一个show属性,通过true,false控制其展示还是隐藏。
-
至于点击事件,则命名为同一个名字,每次点击传入当前点击的下标,然后根据下标更改掉对应的数据。
-
代码展示
//数据构造 (数据原始是没有show属性的) let list= [ { title:"1234567", content:"我是内容我是内容我是内容我是内容我是内容我是内容", show:false }, { title:"1234567", content:"我是内容我是内容我是内容我是内容我是内容我是内容", show:false } ] //便利 <div v-for="item,index in list" class="xgblock"> <div class="desctxt"> { {item.title}} </div> <div v-show="!item.show" @click="dj(index)"> 点击加载更多 </div> <div v-show="item.show"> { {item.content}} </div> </div> //事件 dj(index){ this.list[index].show = !this.list[index].show; }