vue避免dom操作，标签多选功能

最新推荐文章于 2022-02-23 10:52:51 发布

小张也被占用

最新推荐文章于 2022-02-23 10:52:51 发布

阅读量437

点赞数 1

分类专栏： v

本文链接：https://blog.csdn.net/qq_40047198/article/details/89235316

版权

v 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实用场景：

<div class="goodsClassify clearfix">
  <span class="goodsSpan fl"><i class="warnImg"></i>商品分类:</span>
   <ul class="classifyList fl">
       <li class="label" 
            :class="{labelSelected:chooseAfterValue.indexOf(index)!=-1}" 
            v-for="(item,index) in goodsList" :key="index" 
            @click="selectionLabel(index)">
               <p>家居行业</p>
               <a class='deselection'>×</a>
       </li>
   </ul>
</div>

export default {
  data() {
    return {
      goodsList:[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
      chooseAfterValue:[]
      }
   },
  methods: {
    // 选择商品分类
    selectionLabel(value){
      if(this.chooseAfterValue.indexOf( value )!=-1){
            //已选择此标签，再点击时删除数组中的此项，至少有一个标签才能删除
          if(this.chooseAfterValue.length>1){
              this.chooseAfterValue.splice( this.chooseAfterValue.indexOf( value ), 1 )
          }else{
            this.$message({
                message: '至少选择1个商品分类！',
                type: 'warning'
              });
          }
        }else{
          if(this.chooseAfterValue.length<3){
            //未选择此标签，点击时数组中添加此项
            this.chooseAfterValue.push(value)
          }else{
           this.$message({
                message: '最多选择3个商品分类！',
                type: 'warning'
              });
          }
        }
    }
}

//确定的时候将this.chooseAfterValue传给后台