Vue 实现改变当前点击Class 样式、改变多个点击Class样式 实例 解析

Vue 实现改变当前点击Class 样式、改变多个点击Class样式实例解析

文章概览

1：改变当前点击class 样式

2：改变多个点击class 样式

一、改变当前点击Class样式

实现思路：:class 动态判断样式

实例

template

<template>
  <div>
    <ul v-for="(value,index) in values">
      <li @click="cg_current_index(index)" :class="{'bg_color':current_index==index}">
        选择 一
      </li>
    </ul>
  </div>
</template>

script

<script>
  export default {
    name: "click_change_class",
    data() {
      return { 
  values: [
          {id: 1, name: "选项一"},
          {id: 2, name: "选项二"},
          {id: 3, name: "选项三"},
          {id: 4, name: "选项四"},
          {id: 5, name: "选项五"}], 
        current_index: -1
      }
    }, methods: {
      cg_current_index(index) {
        this.current_index = index
      }
    }
  }
</script>

<style scoped>
  li {
    width: 300px;
    margin: 0 40%;
    border: 1px solid darkgray;
    cursor: pointer;
    padding: 10px;
    margin-top: 10px;
  }

  .bg_color {
    background-color: #FFE69F;
  }
</style>

代码解析: click=>cg_current_index 改变标记值=>:class="{'class_name':condition}"判断样式
current_index:index 配置默认选中项 current_index: -1 默认不选中

效果

二、改变多个点击Class样式

实现点击改变多个class样式可以这么理解，获取用户选中内容，你会发现不单单是改变样式这么简单

实例

template

<template>
  <div> 
   <ul>
      <li class="border-0">请选择 购买物品</li>
      <li v-for="(value,index) in goods" @click="doOnclick_good(index)"
          :class="{'bg_color':check_goods_exit(index)}">
        {{value.name}}
      </li>
      <li>您选择:{{index}}</li>
    </ul> 
  </div>
</template>

script

<script>
  export default {
    name: "click_change_class",
    data() {
      return {
        goods: [
          {id: 1, name: "手机"},
          {id: 2, name: "电脑"},
          {id: 3, name: "笔记本"},
          {id: 4, name: "平板"},
          {id: 5, name: "液晶电视"}],
        current_index: -1,
        goods_ds: []
      }
    }, methods: {
      cg_current_index(index) {
        this.current_index = index
      }, doOnclick_good(value) {
        var exit = false;
        if (this.goods_ds.includes(value)) {
          /*根据值删除*/
          Array.prototype.contains = function (obj) {
            var i = this.length;
            while (i--) {
              if (this[i] === obj) {
                return i;
              }
            }
            return false;
          }
          this.goods_ds.splice(this.goods_ds.contains(value), 1)
          exit = true;
        }
        if (exit) {
          console.log("存在已被删除")
        } else if (!exit) {
          this.goods_ds.push(value)
          console.log("不存在已被添加")
        }
        return exit;
      }, check_goods_exit(value) {
        if (this.goods_ds.includes(value)) {
          return true;
        } else {
          return false;
        }
      }
    }
  }
</script>

<style scoped>
  li {
    width: 300px;
    margin: 0 40%;
    border: 1px solid darkgray;
    cursor: pointer;
    padding: 10px;
    margin-top: 10px;
  }

  .bg_color {
    background-color: #FFE69F;
  }
</style>

代码解析：

:class="{'class_name':condition}"监听条件样式=>check_goods_exit 函数计算是否选中 =>doOnclick_good 添加选中、移除选中
注意：根据值判断、删除数组内容

效果

问题解答

问：为什么根据值判断数组内容

不能保证用户选择的下标和数组下标一一对应，当用户选择下标为1 数组中存入关系 {0:1},用户再次点击，{1:1},背景样式切换，用户点击多次进行校准'下标'未实现预期效

Vue 实现改变当前点击Class 样式、改变多个点击Class样式实例解析