Vue 系列之样式相关

Class 与 Style 绑定

动态修改元素样式

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
    <style type="text/css">
        .normal {
            color: palegreen
        }

        .error {
            color: red
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="normal" v-bind:class="{error: changed}" @click="handleClick">{{message}}</div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                changed: false,
                message: "hello world"
            },
            methods: {
                handleClick: function () {
                    this.changed = !this.changed
                }
            }
        })
    </script>
</body>

上述代码定义了两种样式：normal 和 error，通过判断 changed 值是否为 true 来决定是否使用 error 样式

为一个元素绑定多种样式

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
    <style type="text/css">
        .normal {
            color: palegreen
        }
        .fs{
            font-size: 24px
        }
    </style>
</head>

<body>
    <div id="root">
        <div v-bind:class="styles">{{message}}</div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                changed: false,
                message: "hello world",
                styles:["normal","fs"]
            }
        })
    </script>
</body>

v-bind:class 支持对多种样式进行增加或异常，可参考动态修改样式来解决这个问题。

应用在组件上

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
    <style type="text/css">
        .normal {
            color: palegreen
        }
        .fs {
            font-size: 24px
        }
    </style>
</head>

<body>
    <div id="root">
        <my-component v-bind:class="styles" :msg="message"></my-component>
    </div>

    <script>

        Vue.component("my-component", {
            props: ["msg"],
            template: "<p>{{msg}}</p>"
        })

        new Vue({
            el: "#root",
            data: {
                message: "hello world",
                styles: ["normal", "fs"]
            }
        })
    </script>
</body>

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
    <style type="text/css">
        .normal {
            color: palegreen
        }

        .error {
            color: red
        }

        .fs {
            font-size: 24px
        }
    </style>
</head>

<body>
    <div id="root">
        <div v-bind:style="styleObject">{{message}}</div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                message:'hello world',
                styleObject: {
                    color: 'blue',
                    fontSize: '13px'
                }
            }
        })
    </script>
</body>

v-bind:style 的数组语法支持将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>