目录

Class 与 Style 绑定

动态修改元素样式

<head>
    <  charset=\"utf-8\" />
    <  http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    < >Page  </ >
    <  name=\"viewport\" content=\"width=device-width, initial-scale=1\">
    <  src=\"./vue.js\"></ >
    <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>

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

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

为一个元素绑定多种样式

<head>
    <  charset=\"utf-8\" />
    <  http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    < >Page  </ >
    <  name=\"viewport\" content=\"width=device-width, initial-scale=1\">
    <  src=\"./vue.js\"></ >
    <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>

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

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

应用在组件上

<head>
    <  charset=\"utf-8\" />
    <  http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    < >Page  </ >
    <  name=\"viewport\" content=\"width=device-width, initial-scale=1\">
    <  src=\"./vue.js\"></ >
    <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>

    < >

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

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

绑定内联样式

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

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

        .error {
            color: red
        }

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

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

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

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

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

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

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

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章