码迷,mamicode.com
首页 > 其他好文 > 详细

vue 文字点击变色

时间:2020-01-02 15:31:57      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:style   spl   line   css   技术   efault   splay   hang   ble   

样式图:

技术图片

 

 

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就是用于绑定数据和元素属性的

vue 文字点击变色

标签:style   spl   line   css   技术   efault   splay   hang   ble   

原文地址:https://www.cnblogs.com/lovebear123/p/12132898.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!