六、Class和Style的绑定

class对象语法语法：v-bind:class=”{‘css样式1’: 真值表达式1, ‘css样式2’: 真值表达式2}”。该指令可以与普通的class共同使用。

   <div id="app" class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

   var vm = new Vue({
        el: '#app',
        data: {
            isA: true,
            isB: false
        }
    })

最终页面将渲染为：

   <div id="app" class="static class-a"></div>

2. class数组语法 v-bind:class 指令可以接收一个数组，以应用一个class列表。

   <div id="app" class="static" v-bind:class="[classA,classB]"></div>

   var vm = new Vue({
        el: '#app',
        data: {
            classA: 'class-a',
            classB: 'class-b'
        }
    })

最终页面将渲染为：

   <div id="app" class="static class-a"></div>

3. style对象语法语法：v-bind:style=”{属性名1：表达式1, 属性名2：表达式2}”

   <div id="app" v-bind:style="{ margin: marginValue, text-align: textAlign }"></div>

   var vm = new Vue({
        el: '#app',
        data: {
            marginValue: "10px",
            textAlign: "center"
        }
    })

最终页面将渲染为：

   <div id="app" style="margin:10px;text-align:center;"></div>

该指令也可以与普通的style属性同时存在。

4. style数组语法 v-bind:style 指令也可以接收一个数组，会将多个样式应用到该元素上。

   <div id="app" v-bind:style="[styleA,styleB]"></div>

   var vm = new Vue({
        el: '#app',
        data: {
            styleA: 'margin:10px',
            styleB: 'text-align:center'
        }
    })

最终页面将渲染为：

   <div id="app" style="margin:10px;text-align:center;"></div>

如果觉得我的文章对您有用，请随意打赏。

您的支持将是我最大的动力！

Latest Post