Vue中Class绑定和style绑定的方式

最新推荐文章于 2024-04-15 16:48:51 发布

echo 云清

最新推荐文章于 2024-04-15 16:48:51 发布

阅读量432

点赞数 5

文章标签： vue.js javascript 前端样式绑定

本文链接：https://blog.csdn.net/qq_57005976/article/details/136617765

版权

样式绑定

数据绑定的一个常见需求场景是操纵元素的CSS的class列表和内联样式

因为class和style都是标签属性，我们可以和其他属性一样使用v-bind指令将它们和动态的字符串绑定
在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的, Vue对于class和style的v-bind的值除了字符串外，表达式的值也可以是对象或数组

`Class绑定的三种方式`

绑定字符串适用场景：如果确定动态绑定的样式个数只有1个，但是名字不确定需要动态指定

<style>
        .static{
            border: 1px solid black;
            background-color: aquamarine;
        }
        .big{
            width: 200px;
            height: 200px;
        }
        .small{
            width: 100px;
            height: 100px;
        }
    </style>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!--静态写法-->
        <div class="static small">{{msg}}</div>
        <!--动态绑定-->
        <button @click="changeBig">变大</button>
        <button @click="changeSmall">变小</button>
        <div class="static" :class="c1">{{msg}}</div>
    </div>
    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                msg : 'Class绑定之字符串形式',
                c1 : 'small'
            },
            methods: {
                changeBig(){
                    this.c1 = 'big'
                },
                changeSmall(){
                    this.c1 = 'small'
                }
            },
        })
    </script>
</body>

绑定数组适用场景：当绑定的样式个数不确定，并且样式的名字也不确定的时候

<style>
        .static {
            border: 1px solid black;
            width: 100px;
            height: 100px;
        }
        .active {
            background-color: green;
        }
        .text-danger {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!--静态写法-->
        <div class="static active text-danger">{{msg}}</div>
        <!--动态写法-->
        <div class="static" :class="['active','text-danger']">{{msg}}</div>
        <div class="static" :class="[c1, c2]">{{msg}}</div>
        <div class="static" :class="classArray">{{msg}}</div>

    </div>
    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                msg : 'Class绑定之数组形式',
                c1 : 'active',
                c2 : 'text-danger',
                classArray : ['active', 'text-danger']
            }
        })
    </script>

绑定对象适用场景：样式的个数是固定的，样式的名字也是固定的，但是需要动态的决定样式用还是不用

对象中属性的名字必须和样式名一致

<style>
    .static {
        border: 1px solid black;
        width: 100px;
        height: 100px;
    }
    .active {
        background-color: green;
    }
    .text-danger {
        color: red;
    }
</style>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!--动态写法-->
        <div class="static" :class="{active:true,'text-danger':false}">{{msg}}</div>
        <div class="static" :class="classObj">{{msg}}</div>
    </div>
    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                msg : 'Class绑定之对象形式',
                classObj : {
                    // 该对象中属性的名字必须和样式名一致(对象中的属性名都有单引号并且可以省略,但是对于属性名含有划线的单引号不能省略)
                    active : false,
                    'text-danger' : true
                }
            }
        })
    </script>
</body>

`style绑定的三种方式`

绑定对象时对象的属性名要采用大驼峰的形式,属性值需要用单引号括起来

<style>
    .static {
        border: 1px solid black;
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!--静态写法-->
        <div class="static" style="background-color: green;">{{msg}}</div>
        <!--字符串形式-->
        <div class="static" :style="myStyle">{{msg}}</div>
        <!--对象形式-->
        <div class="static" :style="{backgroundColor: 'gray'}">{{msg}}</div>
        <div class="static" :style="styleObj">{{msg}}</div>
        <!--数组形式-->
        <div class="static" :style="styleArray">{{msg}}</div>
    </div>
    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                msg : 'Style绑定',
                myStyle : 'background-color: gray;',
                styleObj : {
                    backgroundColor: 'green'
                },
                styleArray : [
                    {backgroundColor: 'green'},
                    {color : 'red'}
                ]
            }
        })
    </script>
</body>

echo 云清

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Vue中Class绑定和style绑定的方式

/ 该对象中属性的名字必须和样式名一致(对象中的属性名都有单引号并且可以省略,但是对于属性名含有划线的单引号不能省略)'Class绑定之字符串形式''Class绑定之数组形式''Class绑定之对象形式'
复制链接

扫一扫