Vue之动态绑定CSS

最新推荐文章于 2023-09-07 21:55:37 发布

白衣神棍

最新推荐文章于 2023-09-07 21:55:37 发布

阅读量2.4k

点赞数 1

本文链接：https://blog.csdn.net/qq_29914229/article/details/90064120

版权

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

下面介绍绑定html class中的对象语法

<div v-bind:class="{ active: isActive }"></div>

上述的这条式子中，当isActive为true时，这个div具备class="active"这个属性，isActive为false的时候，就不具备这个class属性

例子，当isActive=true，等同于下面这种情况

<div class="active"></div>

下面通过一个小例子再次实践一下vue中的动态绑定css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">

<span v-on:click="changeColor = !changeColor" v-bind:class="{changeColor:changeColor}">
    hello world
</span>
</div>
<script src="app.js"></script>
</body>
</html>

span{
    background: red;
    color: #fff;
    padding: 10px;
    margin: 10px 0px;
    display: inline-block;
}

.changeColor{
    background: green;
}

new Vue({
    el:"#vue-app",
    data:{
        changeColor:false
    },
    methods :{

    }
});

上面是相关的代码，实现的功能大概就是:点击改变span的样式

初始的时候为红色，点击后背景颜色变为绿色

初始的时候，我将changeColor属性置为了flase，也就是span不具备class属性

点击之后changeColor属性变成了true，这时候span具备了class属性，背景颜色被改变为绿色

白衣神棍

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue之动态绑定CSS

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

扫一扫