vue动态添加元素，为动态元素绑定点击事件（根据个人业务记录）

vue动态添加元素，为动态元素绑定点击事件。（根据个人业务记录）

 需求：

1. 返回一个list，首先显示list中某一个的一部分，然后可以点击一个图标，显示对应剩下的一部分。

思路： 

1.  手下想到的是用v-html标签对数据进行拼接，然后再绑定到dom中去。但是这样就涉及到动态添加属性，添加事件了，搜索看了一下觉得不太合适，就没用了。
2. vue离不开数据驱动，决定从数据入手。

实现：

1. 处理数据，将数组数据，转变为数据对象，在每一个对象中都添加一个show属性，通过true，false控制其展示还是隐藏。

2. 至于点击事件，则命名为同一个名字，每次点击传入当前点击的下标，然后根据下标更改掉对应的数据。

• 代码展示

  //数据构造 (数据原始是没有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;
  }