Vue.js入门学习（三） Class与Style绑定

港控/mmm° 2022-05-20 02:45 504阅读 0赞

## Class 与 Style 绑定 ##

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用 `v-bind` 处理它们：我们只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在`v-bind` 用于 `class` 和 `style` 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

## 绑定 HTML Class ##

尽管可以用 Mustache 标签绑定 class，比如 \`\{% raw %\}class="\{ \{ className \}\}"\{% endraw %\}\`，但是我们不推荐这种写法和 \`v-bind:class\` 混用。两者只能选其一！

### 对象语法 ###

我们可以传给 `v-bind:class` 一个对象，以动态地切换 class。注意 `v-bind:class` 指令可以与普通的 `class` 特性共存：

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

data: {
      isA: true,
      isB: false
    }

渲染为：

<div class="static class-a"></div>

当 `isA` 和 `isB` 变化时，class 列表将相应地更新。

### 数组语法 ###

我们可以把一个数组传给 `v-bind:class`，以应用一个 class 列表：

<div v-bind:class="[classA, classB]">

data: {
      classA: 'class-a',
      classB: 'class-b'
    }

渲染为：

<div class="class-a class-b"></div>

## 绑定内联样式 ##

### 对象语法 ###

`v-bind:style` 的对象语法十分直观——看着非常像 CSS，其实它是一个 [JavaScript 对象][JavaScript]。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：

<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'
      }
    }

### 数组语法 ###

`v-bind:style` 的数组语法可以将多个样式对象应用到一个元素上：

<div v-bind:style="[styleObjectA, styleObjectB]">

[JavaScript]: https://www.w3cschool.cn/javascript/js-objects.html

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue Class 与 Style 绑定

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

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

相关 class和style绑定

在数据绑定中，一个常见需求是，将数据与元素的 class 列表，以及元素的 style 内联样式的操作绑定在一起。由于它们都是属性(attribute)，因此我们可以使用

落日映苍穹つ/ 2023年10月09日 11:05/ 0 赞/ 66 阅读

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

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

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

相关 Vue.js入门学习（三） Class与Style绑定

Class 与 Style 绑定数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用 `v-bind` 处理它们：我们只需要计

港控/mmm°/ 2022年05月20日 02:45/ 0 赞/ 505 阅读

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

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

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

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

相关 vue Class 与 Style 绑定

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

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

相关 Class与Style绑定

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

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

相关三、class与style绑定

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

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

相关 Class与Style绑定

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

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