vue 文字点击变色

Posted 2020-11-25 lovebear123

样式图：

 

 

html：

 <div :key="index" v-for="(item, index) in standing" class="Category">
      <label
        class="Planning"
        v-bind:class="{ updata_clable: IsIndex === index }"
        @click="change(index)"
        >{{ item.name }}</label
      >
    </div>

js：

<script>
export default {
  data() {
    return {
      standing: [
        { name: "李现" },
        { name: "邓伦" },
        { name: "王俊凯" },
        { name: "千玺" }
      ],
      IsIndex: 0
    };
  },
  methods: {
    change: function(index) {
      this.IsIndex = index;
    }
  }
};
</script>

css：

.Planning {
  font-size: 14px;
  font-family: DengXian;
  font-weight: bold;
  line-height: 14px;
  color: rgba(112, 112, 112, 1);
  opacity: 1;
  display: block;
  text-align: center；
}
.Category {
  width: 100%;
  height: 40px;
  margin-top: 10px;
}
.updata_clable {
  color: #19874f;
}

v-bind就是用于绑定数据和元素属性的