vue动态 class

动态样式绑定可以实现选择性的给标签添加样式。
动态绑定有两种语法，一种是对象语法，一种是数组语法

对象语法

语法如下：

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

active为类名，isActive是一个布尔值，可以是变量，也可以是方法（返回值是布尔类型的），isActive的真假决定样式active是否生效。

既然是对象，那就可以有多个属性，也就是说可以绑定多个类名：

<!-- 
    类名中间有中划线的，要用单引号引起来或者使用驼峰命名如：lightText
 -->
<div v-bind:class="{ active: isActive,'light-bg':true,lightText:false}"></div>

比如常见的鼠标移动上去改变样式，这里就要用到动态样式绑定，下面我们来把这个案例出来看看：

<template>
    <ul id="#app">
        <!-- 
            @mouseover:绑定鼠标移动上去事件
            @mouseout:绑定鼠标移动下去事件
         -->
        <div class="base" :class="{hover:index===1}" @mouseover="index=1" @mouseout="index=-1">选项选项</div>
    </ul>
</template>

<style scope>
/* 基础样式 */
.base{
   
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10px;
    border-radius: 5px;
    color: #FEFEFE;
    width: 300px;
    height: 50px;
    background: #8D999D;
}
/* 动态改变的样式 */
.hover{
   
    background: #FD6821;
}
</style>
<script>
export default {
   
    name: "app",
    // 数据
    data() {
   
        return {
   
            index:-1
        };
    }
};
</script>