vue动态更改样式，实现div点击效果

效果展示：

代码如下：

<template>
  <div class="main">
    <div
      class="aaa"
      :class="{active:index==isActive}"
      v-for="(item, index) in contentlist"
      @click="showdifference(index)"
      :key="index">
      {{item.key}}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: '',
      contentlist: [{key: 1}, {key: 2}, {key: 3}, {key: 4}]
    }
  },

  methods: {
    showdifference(index){
      this.isActive = index
      console.log(this.isActive)
    }
  }

}
</script>

<style>
.aaa {
  margin: 10px;
  width: 95%;
  height: 100px;
  border: 1px solid;
}
.active{
  border: 2px solid red;
}
</style>

思路：

:class="{active:index==isActive}"

可以实现样式的动态绑定，即div是否有active属性，取决于index==isActive表达式的真假，若为true,则active属性被激活，会按照。active样式进行渲染，若为假，则active属性不会被激活，样式不会被渲染。
 

 

  本样例只提供思路，复杂的业务需求请自行设计。

---

                                                  关注我的公众号获取海量vue视频教程