Vue.js 学习(5) -- Class 与 Style 的增强功能

爱被打了一巴掌 2022-06-15 03:15 144阅读 0赞

我们已经知道，可以使用v-bind来为html元素设置属性。  
于此同时，Vue.js 专门增强了指令v-bind，来设置html元素的属性class和style。

## HTML class ##

**1、参数为对象**

基本写法：

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

我们可以给isActive附一个布尔值，当为true时，class=”active”；反之，如果isActive为false，那么class=”“。

多个类名同理，只是格式稍有不同，并且，v-bind:class可以和普通class共存：

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

如果类比较多，我们可以直接替换为：

<div v-bind:class="classObject"></div>

data: {
      isActive: true,
      error: null
    },
    computed: {
       // 计算属性
      classObject: function () { 
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal',
        }
      }
    }

**2、参数为数组**

刚才我们传给v-bind:class的参数是一个对象，然而，我们还可以将数组传给class指令。

<div v-bind:class="[activeClass, errorClass]">

data: { activeClass: 'active', errorClass: 'text-danger' }

这段代码将会渲染为：

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

futhermore, 数组与对象的形式也可以混用：

<div v-bind:class="[{  active: isActive }, errorClass]">

## 内联样式 ##

内联样式的指令形式为v-bind:style, 和正常的CSS不同的是，它可以用驼峰式／短横线分隔符来写CSS属性：

采用驼峰式：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: { activeColor: 'red', fontSize: 30 }

更加简洁的写法：

<div v-bind:style="styleObject"></div>

data: { styleObject: { color: 'red', fontSize: '13px' }
    }

和class一样，style指令也可以接受数组：

<div v-bind:style="[baseStyles, overridingStyles]">

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue.js中class与style的增强绑定

![5e7156269e0140e8a097b0ebf4ba0a78.gif][] 目录一、v-bind绑定class属性（1）绑定class样式，字符串写法（2

「爱情、让人受尽委屈。」/ 2024年03月23日 14:59/ 0 赞/ 23 阅读

相关 vuejs里：style和：class的区别（vue动态操作class和style）

[https://cn.vuejs.org/v2/guide/class-and-style.html][https_cn.vuejs.org_v2_guide_class-a

「爱情、让人受尽委屈。」/ 2022年11月12日 08:26/ 0 赞/ 255 阅读

相关 Vue.js 学习(5) -- Class 与 Style 的增强功能

我们已经知道，可以使用v-bind来为html元素设置属性。于此同时，Vue.js 专门增强了指令v-bind，来设置html元素的属性class和style。 HT

爱被打了一巴掌/ 2022年06月15日 03:15/ 0 赞/ 145 阅读

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

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

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

相关 vuejs Class 与 Style 绑定

转载: 官方教程 [https://cn.vuejs.org/v2/guide/class-and-style.html][https_cn.vuejs.org_v2_guid

野性酷女/ 2022年05月11日 00:56/ 0 赞/ 280 阅读

相关 vue学习（七） class和style学习

<table> <tbody> <tr> <td> <pre><code><!DOCTYPE html> <html lang="en"&g

野性酷女/ 2022年04月22日 10:52/ 0 赞/ 185 阅读

相关 Class与Style绑定

　　对于数据绑定，一个常见的需求是操作元素的class列表和它的内联样式。因为它们都是attribute，我们可以用v-bind处理它们：只需要计算出表达式最终的字符串。不过，

客官°小女子只卖身不卖艺/ 2022年01月12日 09:17/ 0 赞/ 375 阅读

相关三、class与style绑定

![1512962-20190510222652255-413032632.png][] 对象形式： ![1512962-20190510222700208-8984880

悠悠/ 2021年12月09日 21:21/ 0 赞/ 396 阅读

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