Vue学习笔记（Class与style绑定）

àì夳堔傛蜴生んèń 2022-05-15 00:47 240阅读 0赞

#### 1.Class绑定 ####

在Vue中，如果要为这样的一个div的class属性进行动态赋值

<div class="active text-danger">class1</div>

可以使用v-bind，一般有以下三种写法：

<div v-bind:class="{ 'active': isActive, 'text-danger':hasError}">class1</div> //data()部分
    return{
      isActive: true,
      hasError: true  //如果设置为false，则text-danger属性不可见
    }

<div v-bind:class="classObject">class2</div> //data()部分
    classObject:{
        'active': true,   //如果设置为false，则active属性不可见
        'text-danger':true
    }

<div v-bind:class="[activeClass, errorClass]">class3</div> //data()部分
    classObject:{
        activeClass:'active',
        errorClass:'text-danger'
    }

“v-bind:”可以直接简写成”:”，则上述代码可以写成下面的样子

<div :class="{ 'active': isActive, 'text-danger':hasError}">class1</div>
    <div :class="classObject">class2</div>
    <div :class="[activeClass, errorClass]">class3</div>

浏览器展示结果如下：  
![70][]

#### 2.style绑定 ####

与class的绑定一样，style的绑定也有下面三种写法

<div :style="{ color: activeColor, fontSize: fontSize}">style1</div>
    <div :style="styleObject">style2</div>
    <div :style="[baseStyles, overridngStyles]">style3</div>

data部分可以写成这样

activeColor: 'red',
    fontSize: '20px',
    styleObject:{
      'color': 'red',
      'fontSize': '20px'
    },
    baseStyles:{
      'color': 'red'
    },
    overridngStyles:{
      'fontSize': '20px'
    }

浏览器展示结果如下：  
![70 1][]

[70]: /images/20220515/a65fbf0b42514b40817d87670b4dc6dc.png
[70 1]: /images/20220515/aa7c6cbdf8544fc48db28311679561a3.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue Class 与 Style 绑定

简介 HTML 元素的 class 绑定和内联样式绑定是数据绑定的一个常见需求。由于字符串拼接麻烦且易错。因此，在用 v-bind 绑定 class 和 sty...

左手的ㄟ右手/ 2024年04月18日 19:16/ 0 赞/ 93 阅读

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

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

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

相关 vue学习笔记(三)class和style绑定

前言通过上一章的学习[vue学习笔记(二)vue的生命周期和钩子函数][vue_vue]，我们已经更近一步的知道了关于vue的一些知识，本篇博客将进一步探讨vue其它方

痛定思痛。/ 2023年06月26日 12:28/ 0 赞/ 8 阅读

相关 Vue动态绑定Class 与 Style

Class 可以通过对象语法和数组语法进行动态绑定 <div v-bind:class="{ active: isActive, 'text-danger': has

悠悠/ 2022年05月21日 01:26/ 0 赞/ 290 阅读

相关 Vue学习笔记（Class与style绑定）

1.Class绑定在Vue中，如果要为这样的一个div的class属性进行动态赋值 <div class="active text-danger">class

àì夳堔傛蜴生んèń/ 2022年05月15日 00:47/ 0 赞/ 241 阅读

相关 Vue绑定属性绑定Class 绑定style

vue是如何绑定属性和class以及style的下面我将会插入一段代码，本人在代码里做了相当详细的注释。 <template> <!-- v

待我称王封你为后i/ 2022年03月25日 09:36/ 0 赞/ 467 阅读

相关 vue官网学习笔记（四）Class 与 Style 绑定

绑定HTML Class \对象语法我们可以传给v-bind:class一个对象，以动态地切换css： 1.单个css html: <div v-

快来打我*/ 2022年02月27日 14:20/ 0 赞/ 207 阅读

相关 vue Class 与 Style 绑定

绑定Class 对象语法》 <div class="test" v-bind:class="{ 'class-a': isA, 'class-b':

叁歲伎倆/ 2022年01月20日 09:07/ 0 赞/ 434 阅读

相关 Class与Style绑定

Class与Style绑定概述 Class绑定对象语法数组语法用在组件上绑定内联样式对象

雨点打透心脏的1/2处/ 2021年10月20日 00:26/ 0 赞/ 464 阅读

相关 Vue的class与style绑定

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

「爱情、让人受尽委屈。」/ 2021年09月20日 02:44/ 0 赞/ 393 阅读