vue-绑定class样式

喜欢ヅ旅行 2023-07-23 09:56 44阅读 0赞

**1、数组语法**

我们可以借助于v-bind指令来实现：

HTML：

<div id="app">
        <div v-bind:class="activeClass"></div>
        <div v-bind:class="errorClass"></div>
        <div v-bind:class="[activeClass, errorClass]"></div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({ 
            el: "#app",
            data: { 
                activeClass: 'active',
                errorClass: ['text-danger', 'text-error']
            }
        })
    </script>

渲染后的效果：（具有active和hasError的样式）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1Y2t5c3Rhcl85OQ_size_16_color_FFFFFF_t_70_pic_center]

**2、对象语法**

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

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

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness（所有的值都是真实的，除了false,0,“”,null,undefined和NaN）。

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。如下模板:

<div class="static"
         v-bind:class="{ active: isActive, 'text-danger': hasError }">
    </div>

和如下 data：

data: { 
      isActive: true,
      hasError: false
    }

结果渲染为：

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

active样式和text-danger样式的存在与否，取决于isActive和hasError的值。本例中isActive为true，hasError为false，所以active样式存在，text-danger不存在。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1Y2t5c3Rhcl85OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/9cbec181b27449aabe0d90cf3af249fd.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 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 赞/ 119 阅读

相关 Vue绑定class

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

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

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

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

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

相关 vue10-class数组样式绑定

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

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

相关 vue09-class对象样式绑定

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

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

相关 VUE 样式绑定

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

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

相关 vue class、style样式绑定

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

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

相关 Vue - 样式绑定

实现功能：点击一次字体变颜色，再点一次字体恢复默认颜色一. class 选择器的对象绑定 1. 对象方式 2. 数组方式

た入场券/ 2021年07月25日 15:00/ 0 赞/ 506 阅读