Vue框架整理：动态设置样式style、class

最新推荐文章于 2024-04-23 11:56:07 发布

freedom_文

最新推荐文章于 2024-04-23 11:56:07 发布

阅读量5.1w

点赞数 3

分类专栏： Vue

本文链接：https://blog.csdn.net/freedomVenly/article/details/80752215

版权

Vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

先来说一下：
:class 是可以与一般用class 并存的

动态添加的类名是基于数据的，当对应的数据为 true 时会显示，否则没有

对象语法：

绑定单个class:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:200px;height:30px;margin: 100px;
        }

        .active1{
            padding: 10px;
            background: #aff;
            color: #faa;
        }

        .active2{
            border: 2px solid #faf;
        }

        .computedStyle{ color: #f00; }
    </style>
</head>
<body>

<div id="v1" class="normal" :class="{ 'active1':style1 }">
    对象绑定style1
</div>

<script src="vue.min.js"></script>

<script>
    var v1=new Vue({
        el:"#v1",
        data:{
            style1:true,
            style2:true
        }
    });
</script>

</body>
</html>

显示效果：
这里写图片描述

绑定多个class:

<div id="v1" class="normal" :class="{ 'active1':style1 , active2:style2  }">
    对象绑定style2
</div>

显示效果：
这里写图片描述

一些比较复杂的判断等，可以通过computed计算，获取的返回值就是class类名：
或者用methods 等等；

<div id="v1" class="normal" :class="stl">
    通过计算属性绑定style
</div>

<script src="vue.min.js"></script>
<script>
    var v1=new Vue({
        el:"#v1",
        data:{
            style1:true,
            style2:true
        },
        computed:{
            stl:function () {
             return {
                 computedStyle:this.style1  && this.style2
             }
            }
        }
    });

</script>

这里写图片描述

数组语法：

一般设置多个class的时候，用数组语法绑定的比较多：


<div id="v1" :class="[ s1 , s2 ]">
    数组语法同时添加多个class
</div>

<script>
var v1=new Vue({
        el:"#v1",
        data:{
            s1:"active1",
            s2:"active2"
        }
    });

</script>

或使用 “三元表达式” 设置class


<div id="v1" :class="[s3 ? s1 : s2 ]">
    数组语法同时添加多个class
</div>

设置内联样式：


<div id="v1" :style="styles">
    使用内联：style设置样式
</div>

<script src="vue.min.js"></script>

<script>
var v1=new Vue({
        el:"#v1",
        data:{
            styles:{
                 color:'#f00',
                 fontSize:17+"px"
            }
        }
    });

</script>

这里写图片描述

freedom_文

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Vue框架整理：动态设置样式style、class

先来说一下： :class 是可以与一般用class 并存的动态添加的类名是基于数据的，当对应的数据为 true 时会显示，否则没有对象语法：绑定单个class:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&
复制链接

扫一扫