Vue第6话 class与style绑定

最新推荐文章于 2023-05-24 16:37:24 发布

逆流者blog

最新推荐文章于 2023-05-24 16:37:24 发布

阅读量88

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45847167/article/details/105527599

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

class/style 绑定用来实现动态样式效果

1. class 绑定

格式 :class=‘exp’
表达式是字符串: ‘classA’
表达式是对象: {classA: isA, classB: isB}
表达式是数组: [‘classA’, ‘classB’]

2. style 绑定

格式 :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
activeColor/fontSize 是 data 属性

3. 编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-class与style绑定</title>
    <style>
        .classA {
            color: red;
        }
        .classB {
            background: deepskyblue;
        }
        .classC {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="app-4">
    <h2>1、class绑定： :class='xxxx'</h2>
    <p class="classB" :class="a">表达式是字符串： .classA</p>
    <p :class="{classA: isA, classB: isB}">表达式是对象： {classA: isA, classB: isB}</p>
    <p :class="['classA', 'classC']">表达式是数组： ['classA', 'classC']</p>

    <h2>2、style 绑定</h2>
    <p :style="{color, fontSize}">style="{color: activeColor, fontSize: fontSize + 'px'}"</p>

    <button @click="update">更新</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app-4',
        data: {
            "a": 'classA',
            "isA": true,
            "isB": false,
            "color": 'red',
            "fontSize": '20px'
        },
        methods: {
            update () {
                this.a = 'classC';
                this.isA = !this.isA;
                this.isB = !this.isB;
                this.color = 'blue';
                this.fontSize = '40px'
            }
        }
    });
</script>
</body>
</html>

逆流者blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue第6话 class与style绑定

class/style 绑定用来实现动态样式效果1. class 绑定格式 :class=‘exp’表达式是字符串: ‘classA’表达式是对象: {classA: isA, classB: isB}表达式是数组: [‘classA’, ‘classB’]2. style 绑定格式 :style="{ color: activeColor, fontSize: fontSiz...
复制链接

扫一扫

专栏目录