vue 动态切换样式

思路：动态绑定class样式，通过事件赋值，从而改变样式！

<div class="f">
  <div :class="{'toggle': ver==1 }" @click="ver=1">1</div>
  <div :class="{'toggle': ver==2 }" @click="ver=2">2</div>
  <h2>{{ver}}</h2>
</div>

 

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      ver: 1
    }
  },
}
</script>

.f {
    display: flex;
    div{
      width: 100px;
      height: 100px;
      background-color: pink;
      margin: 10px;  
    }

.toggle {
        border: 5px solid yellow;
      }

效果图