Vue中动态添加类名

在遇到有小菜单的切换需求时，例如

 菜单代码类似

<div class="options">
            <ul>
              <li>东环校区</li>
              <li>柳东校区</li>
              <li>柳石校区</li>
            </ul>
          </div>

在JavaScript或者jQuer中，要拿到拿到DOM，再对于该DOM的类名进行操作。

但是在Vue中，提供了类的绑定（Class 与 Style 绑定 | Vue.js）

 下面的语法表示，当isActive表达式成立时，类名active存在。

<div :class="{ active: isActive }"></div>

 所以我们实现效果的实例如下

HTML

<div class="options">
            <ul>
              <li @click="select(1)" :class="{chosen: BeChosen == 1}" >东环校区</li>
              <li @click="select(2)" :class="{chosen: BeChosen == 2}">柳东校区</li>
              <li @click="select(3)" :class="{chosen: BeChosen == 3}">柳石校区</li>
            </ul>
          </div>

SCSS

.options {
        font-size: 25px;
        color: gray;
        margin: 5px;
        line-height: 30px;
        font-weight: bold;
        ul {
          li {
            float: left;
            margin-left: 10px;
            cursor: pointer;
          }
          li:hover {
            color: #324d9c;
          }
          .chosen{
            color: #324d9c;
            font-weight: bolder;
          }
        }
      }

script

 data() {
    
    return {
      BeChosen:1 //默认选中东环校区选项
    };
}，
methods: {
 select(i){
      this.BeChosen=i;//设置BeChosen以达到切换类名的效果
    }
  },