vue实现多选改变样式

最新推荐文章于 2023-10-17 13:58:40 发布

sakura12138888

最新推荐文章于 2023-10-17 13:58:40 发布

阅读量963

点赞数 1

分类专栏： vue开发笔记文章标签： vue

本文链接：https://blog.csdn.net/sakura12138888/article/details/114627704

版权

vue开发笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue实现多选改变样式（自己写个小笔记）

欢迎使用Markdown编辑器

直接上代码

// 主要是绑定:class
            <el-tag
              :key="tag"
              v-for="(tag, index) in selectTags"
              @click="multipleSelect(tag, index)"
              :class="{ multipleSelected: multipleList.indexOf(tag) != -1 }"
            >
              {{ tag }}
            </el-tag>
//data
		  data() {
		    return {
		      selectTags: ['标签一', '标签二', '标签三'],
		      multipleList: [],
		    }
		  },
//methods
		  methods:{
			  multipleSelect(tag, index) {
		      // indexOf()方法 没有检索到时返回-1
		      console.log(this.multipleList.indexOf(tag))
		      if (this.multipleList.indexOf(tag) !== -1) {
		        this.multipleList.splice(this.multipleList.indexOf(tag), 1) //取消
		      } else {
		        this.multipleList.push(tag) //选中添加到数组里
		      }
		      // console.log(this.multipleList)
		      },
		  }