本文已参与「新人创作礼」活动，一起开启掘金创作之路

绑定class样式

主要介绍如何利用Vue.js给元素绑定class样式，主要分为两种写法：分为对象写法和数组写法。

1.对象写法

为元素绑定class属性，对象的属性名为类名，值为false或true,true表示使用了该类，false表示未应用。下面的div和addBorder为自定义的类

div1: {
              div: true,
              addBorder: true
        }

2.数组写法

为元素绑定class属性，数组的元素为实际的类名，写上则代表引用了该类，否则则未引用。下面的div1和addBorder1为自定义的类。

 div2: ['div1', 'addBorder1', {
                    'test': true
                }]

3.注意点

（1）两者写法混用，如上述的div2所示，test类是通过对象的形式引入的

（2）对象与数组单独写在行内时，可以在data中定义相应的值进行样式的取舍控制

（3）对于原有的class类，将会保留

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div {
            width: 200px;
            margin: 0 auto;
            height: 300px;
            background-color: orange;
        }
        
        .addBorder {
            border: 10px solid #ccc;
        }
        
        .div1 {
            width: 200px;
            margin: 0 auto;
            height: 300px;
            background-color: orange;
        }
        
        .addBorder1 {
            border: 10px solid #ccc;
        }
        
        .test {
            border-radius: 50px;
        }
        
        .origin {
            border-top: 10px solid #000;
        }
    </style>
</head>

<body>
    <div class="addClass">
        <!-- 对象语法 -->
        <div :class="div1" class="origin"></div>
        <div><button @click="classChange">点击切换样式</button></div>
        <!-- 数组语法 -->
        <div :class="div2"></div>
        <div><button @click="classChange1">点击清除样式</button></div>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '.addClass',
            data: {
                div1: {
                    div: true,
                    addBorder: true
                },
                div2: ['div1', 'addBorder1', {
                    'test': true
                }]
            },
            methods: {
                classChange() {
                    this.div1.addBorder = !this.div1.addBorder;
                },
                classChange1() {
                    this.div2[2]['test'] = !this.div2[2]['test']
                }
            }
        })
    </script>
</body>

</html>

绑定style样式

上面介绍了如何利用Vue.js绑定类，本文将介绍通过Vue.js进行样式修改的另一种方法，即通过style来修改。

核心：为元素绑定style属性，通过对象的形式赋予样式，属性名为样式名（要使用驼峰命名法），属性值为字符串。若要引入多组样式，可以利用数组，后面出现的重复属性会覆盖之前的属性，如下例中的height。当然，也可以于元素行内赋予样式，例如:style="{backgroundColor:color}",这时可以通过在data中定义color数据控制样式的变化。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div :style="[s,s1]"></div>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                s: {
                    width: '400px',
                    height: '400px',
                    backgroundColor: 'orange',
                    margin: '0 auto'
                },
                s1: {
                    border: '10px solid red',
                    height: '500px'
                }
            }
        })
    </script>
</body>

</html>

效果如图：

编辑

Vue.js之绑定class样式、绑定style样式

绑定class样式

1.对象写法

2.数组写法

3.注意点

绑定style样式