vue10-class数组样式绑定

「爱情、让人受尽委屈。」 2022-05-10 00:10 130阅读 0赞

首先看代码

<!DOCTYPE html>
    <html lang=en>
    
    <head>
        <meta charset="utf-8" />
        <title>Hello world</title>
        <script src="vue.js"></script>
        <style>
            .activated {
                color: red;
            }
    
            .activated-one {
                font-size: 50px;
            }
        </style>
    </head>
    
    <body>
        <div id="root">
    
            
            <div @click="handleDivClick" :class="[activated,activatedOne]">HelloWorld</div>
        </div>
    
    
        <script>
            var vm = new Vue({
                el: "#root",
                data: {
                    activated: "",
                    activatedOne: "activated-one"
                },
                methods: {
                    handleDivClick: function () {
                        if (this.activated === "activated") {
                            this.activated = "";
                        } else {
                            this.activated = "activated";
                        }
                    }
                }
            })
    
        </script>
    </body>
    
    </html>

vue绑定class属性，后面跟着要给数组，数组的值就是vue实例中变量的值，把样式的名称赋值给变量，渲染后就赋给了class属性。

![70][]

[70]: /images/20220510/f21499e4b54f40268b0e2f36df270898.png

发表评论取消回复

表情：

评论列表（有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue---绑定样式--class样式（字符串法、对象法、数组法）、style样式（直接绑定法、对象法、数组法）

绑定样式 1.class样式写法：class=“xxx” xxx可以使字符串、对象、数组字符串法：适用于类名不确定，要动态获取对象法：适用于要绑定多个样式，个数不

末蓝、/ 2024年04月07日 11:31/ 0 赞/ 32 阅读

相关 Vue框架学习笔记——绑定class样式和绑定style样式

文章目录前文提要 class样式的三种绑定方法（图片来自参考链接） style样式（内联形式）总结 --------------------

灰太狼/ 2024年02月17日 11:19/ 0 赞/ 49 阅读

相关 vue-绑定class样式

1、数组语法我们可以借助于v-bind指令来实现： HTML： <div id="app"> <div v-bind:class="active

喜欢ヅ旅行/ 2023年07月23日 09:56/ 0 赞/ 45 阅读

相关 Vue Class绑定

> 对象语法绑定 HTML Class <div class="static"

分手后的思念是犯贱/ 2022年12月05日 10:20/ 0 赞/ 123 阅读

相关 Vue绑定class

Vue绑定时可以通过传入一个对象，来动态的切换class: <div v-bind:class="\{active:isActive\}" ></div> 这行代码的意思就

缺乏、安全感/ 2022年06月06日 06:43/ 0 赞/ 255 阅读

相关 vue 通过动态绑定class，改变样式

根据输入框或者下拉选择框有没有值，改变按钮可不可用，及按钮颜色 <el-select v-model="selectData.id" placeholder="请选择

￡神魔★判官ぃ/ 2022年05月13日 15:20/ 0 赞/ 264 阅读

相关 vue10-class数组样式绑定

首先看代码 <!DOCTYPE html> <html lang=en> <head> <meta charset="utf

「爱情、让人受尽委屈。」/ 2022年05月10日 00:10/ 0 赞/ 131 阅读

相关 vue09-class对象样式绑定

首先看代码 <!DOCTYPE html> <html lang=en> <head> <meta charset="utf

淩亂°似流年/ 2022年05月10日 00:10/ 0 赞/ 150 阅读

相关 VUE 样式绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接

蔚落/ 2022年03月27日 13:19/ 0 赞/ 372 阅读

相关 vue class、style样式绑定

class对象方式绑定 <div id="app"> <div @click="handleDivClick" :class="{act

Love The Way You Lie/ 2021年11月02日 09:02/ 0 赞/ 487 阅读