vue Class与Style绑定

最新推荐文章于 2023-10-09 16:25:07 发布

Rain_ffll

最新推荐文章于 2023-10-09 16:25:07 发布

阅读量46

点赞数

文章标签：字符串 vue javascript js css

本文链接：https://blog.csdn.net/xiao898012983/article/details/116784784

版权

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定 HTML Class

对象语法
数组语法

绑定内联样式Style

对象语法
数组语法

下面是代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Class与Style绑定</title>
        <script src="../static/vue.js"></script>
    </head>

    <body>

        <div id="app">
            <!--绑定 HTML Class:
                对象语法
                我们可以传给 v-bind:class 一个对象，以动态地切换 class：-->
            对象语法
            <div v-bind:class="{active:isActive}"></div>

            <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
            </div>

            <div v-bind:class="classObject"></div>

            <div v-bind:class="classCalcute"></div>

            <div v-bind:class="[activeClass, errorClass]">
                数组语法
            </div>

            <div v-bind:class="[isActive ? activeClass : '', errorClass]">
                数组里使用三元表达式
            </div>

            <my-component class="baz boo">
                这是个自定义控件，自定义控件上的添加的类会加载到子控件上。
            </my-component>

            <!--绑定内联样式：
                对象语法
                v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript
                 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用
                 单引号括起来) 来命名：-->
            <div v-bind:style="{
                    color:activeColor,
                    fontSize:fontSize+'px'
                 }">
                这里是是对象语法绑定style
            </div>

            <div v-bind:style="styleObject">
                对象绑定style
            </div>

            <!--数组语法
            v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：-->
            <div v-bind:style="[baseStyles,overridingstyle]">
                数组绑定style
            </div>

            <div v-bind:style="[isActive ? baseStyles : overridingstyle]">
                数组里使用三元表达式绑定style
            </div>

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

        </div>

        <script type="text/javascript">
            //注册组件
            Vue.component('myComponent', {
                template: '<p class="foo bar">Hi</p>'
            })

            var vm = new Vue({
                el: "#app",
                data: {
                    isActive: true,
                    hasError: true,
                    error: null,
                    classObject: {
                        active: true,
                        "text-danger": true,
                    },
                    activeClass: "active",
                    errorClass: "text-danger",
                    activeColor: "red",
                    fontSize: 12,
                    styleObject: {
                        color: "blue",
                        fontSize: "20px",
                    },
                    baseStyles: {
                        color: "green",
                    },
                    overridingstyle: {
                        color: "purple",
                        transform:"translateX(50px)",
                    },
                },
                computed: {
                    classCalcute() {
                        return {
                            active: this.isActive && !this.error,
                            "text-danger": this.hasError && this.error === "fatal",
                        }
                    }
                },

            })
        </script>

    </body>

</html>

运行效果：

Class与Style绑定.png

变量值更换请自行操作

参考：vue.js Class与Style绑定

更新时间: 2018-07-19

Rain_ffll

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue Class与Style绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。绑定 HTML Class对象语法数组语法绑定内联样式...
复制链接

扫一扫