美文网首页
点击事件改变样式 添加按钮新增选中数据

点击事件改变样式 添加按钮新增选中数据

作者: 曹锦花 | 来源:发表于2019-07-09 14:44 被阅读0次
——————————template
   <div class="con">
      <ul>
        <li v-for="(item,index) in a" :key="index" @click="okk(index)" :class="{checked:current == index && current !== ''}">
          <p>{{item.createTime}}</p>
          <p>{{item.title}}</p>
        </li>
      </ul>
    <button @click="add() ">添加</button>
      <ul>
        <li v-for="(item,index) in tarrget" :key="index">{{item}}
        </li>
      </ul>
      <Icon type="ios-add-circle" />

   </div>
____________data
    return {
      a:{},
      current:'', 
      tarrget:[],
    }

____________methods
        add(){
              this.tarrget.push(this.a[this.current]);
              this.current='';
            },
    okk(index){
      this.current=index 
    },

__________style
li.checked{
  background: yellow;
}

相关文章

网友评论

      本文标题:点击事件改变样式 添加按钮新增选中数据

      本文链接:https://www.haomeiwen.com/subject/acuxkctx.html