动态修改style

一句代码实现动态的改变style

:class="{'touchActive':state1,'morenbutton':!state1}"

这里我定义了一个state1 这个的初始值是false，当我们点击时，将这个变量变成true
这样 touchActive定义一个样式
morenbutton定义另一个样式，就可以实现样式的动态切换

 <div style="display: inline;">
          <button @click="chooseproportionNum(0)" :class="{'touchActive':state1,'morenbutton':!state1}">{{proptionList[0]}}</button>
          <button style="margin-left: 5%;margin-right: 5%;" @click="chooseproportionNum(1)" :class="{'touchActive':state2,'morenbutton':!state2}">{{proptionList[1]}}</button>
          <button @click="chooseproportionNum(2)" :class="{'touchActive':state3,'morenbutton':!state3}">{{proptionList[2]}}</button>
        </div>

css

  .morenbutton{
    width: 22%;
    height: 46px;
    background-color: #f1f1f1;
    border-radius: 10px;
    font-size: 16px;
  }
  .touchActive{
    width: 22%;
    height: 46px;
    background-color: #0A87EB;
    border-radius: 10px;
    color: white;
  }