v-bind 绑定 class、style 属性

今天药忘吃喽~ 2024-03-27 02:06 74阅读 0赞

![ef3db181b5ccbea5eab61df8ac499502.jpeg][]

1. v-bind 绑定 class 属性对象语法  
2. v-bind 绑定 class 属性数组语法  
3. v-bind 绑定 style 属性对象语法  
3. v-bind 绑定 style 属性数组语法

\----------------------------------------------------------------------------------

1. v-bind 绑定 class 属性对象语法

--------------------

对象语法的含义是 **:class** 后面跟的是一个对象，语法格式:

1.  `<span :class="{类名: 布尔值}"></span>`

使用示例:

当布尔值为 true 时才显示该类名

:class 属性是一个对象，对象中的键值可以是布尔值，也可以是 vue 示例中的 data 数据名称

1.  `<span :class="{actived: isShow}"></span>`
2.  
3.  `<span :class="{active: true, image: false}"></span>`

当和普通的类同时存在时，不会冲突，会自动进行合并, 下面 class 属性结果为: **class=”online active”**

1.  `<span class="online" :class="{active: true, image: false}"></span>`

如果过于复杂，可以对象放在 computed、methods 中 (数组语法也可以放)

1.  `<span :class="attr">computed 计算属性</span>`
2.  
3.  `<span :class="action()">methods 方法</span>`

2. v-bind 绑定 class 属性数组语法

--------------------

数组语法的含义是 **:class** 后面跟的是一个数组，语法格式:

1.  `<div :class="['active', 'image']"></div>`

当数组中的值可以是字符串，也可以是 vue 实例中的 data 数据

1.  `<div :class="[color, fontSize]"></div>`

3. v-bind 绑定 style 属性对象语法

--------------------

对象语法的含义是 **:style** 后面跟的是一个对象，语法格式:

1.  `<span :style="{css属性名: 属性值}"></span>`

基础使用 (30px 必须加引号，否则会被当成变量解析)

1.  `<div :style="{fontSize: '30px', color: 'red'}">{ {message}}</div>`

:style 值也可以是 vue 实例中的 data 数据 (css 是一个对象)

1.  `<div :style="css">{ {message}}</div>`

3. v-bind 绑定 style 属性数组语法

--------------------

**:style** 数组语法就是后面跟一个数组，数组元素是对象，语法格式:

使用示例: (css1, css2 时 vue 示例中 data 数据对象)

1.  `<div :style="[css1, css2]">{ {message}}</div>`

[ef3db181b5ccbea5eab61df8ac499502.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1c8db2d938784aa6980cf24850f6009c.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue：属性绑定

Vue：属性绑定

喜欢ヅ旅行/ 2024年04月23日 12:44/ 0 赞/ 99 阅读

相关 vue 属性绑定

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />

淩亂°似流年/ 2022年05月31日 10:17/ 0 赞/ 260 阅读

相关 Vue之属性绑定和双向数据绑定

属性绑定：v-bind:title，简写为：:title 双向数据绑定:v-model绑定content的值，也可以改变content的值 <div id="ro

妖狐艹你老母/ 2022年04月22日 10:24/ 0 赞/ 325 阅读

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

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

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

相关 vue基础：绑定属性class，绑定style

vue基础：绑定属性class，绑定style class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

冷不防/ 2022年03月25日 07:55/ 0 赞/ 409 阅读

相关 vue基础：数据绑定，绑定属性，循环渲染

<template> <div id="app"> <h2>你好vue{ {msg}}</h2>/数据绑定/

傷城~/ 2022年03月25日 06:46/ 0 赞/ 324 阅读

相关 vue属性绑定

一、功能 1、界面有一个段落，文字显示为”这是一个段落" 2、鼠标移到段落上，提示“这是段落的提示” 二、实现 <!DOCTYPE html>

ゝ一纸荒年。/ 2022年02月04日 01:53/ 0 赞/ 343 阅读

相关 Angular--HTML属性绑定和DOM属性绑定

前言上一篇博客介绍了数据绑定，意犹未尽，所以这片博客再介绍一下HTML属性绑定和DOM绑定。内容 ![这里写图片描述][70] ![这里写图片描述][70

- 日理万妓/ 2021年09月27日 08:24/ 0 赞/ 452 阅读

相关 Angular2+ 属性绑定

前言当要把视图元素的属性 (property) 设置为`模板表达式`时，就要写模板的`属性 (property) 绑定`。 Angular的属性绑定是

男娘i/ 2021年09月16日 23:28/ 0 赞/ 398 阅读

相关 Vue的属性绑定和双向绑定

目录一点睛二代码三效果 -------------------- 一点睛 v-model：将标签的value值和Vue实例中的data属性值进行绑

冷不防/ 2021年07月24日 18:06/ 0 赞/ 595 阅读