vue-13 类与样式的绑定-自学视频

àì夳堔傛蜴生んèń 2022-12-18 15:53 74阅读 0赞

01

**class绑定**

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

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

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

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

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 真假

你可以在对象中传入更多属性来动态切换多个 class

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

data 如下

data: {
    isActive: true,
      hasError: false
    }

渲染结果为

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

绑定的数据对象不必内联定义在模板里：

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

数据如下

data: {
    classObject: {
        active: true,
    'text-danger': false
      }

classObject对象可以通过计算动态获得

**数组语法**

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

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

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

渲染为

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

02

**style绑定**

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名

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

data: {
    activeColor: 'red',
    }

渲染结果

<div style="color:red; font-size: 24px"></div>

直接绑定到一个样式对象通常更好，这会让模板更清晰：

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

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

对象语法常常结合返回对象的计算属性使用。

发表评论取消回复

表情：

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

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

相关阅读

相关 vue绑定样式

3.1、绑定class 绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定 <div class="basic" :class="mood"

灰太狼/ 2023年10月02日 22:16/ 0 赞/ 23 阅读

相关 Vue｜样式绑定

![968f4c3a9001403aaa609f4e85ac2933.gif][] > class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用

小咪咪/ 2023年09月29日 23:47/ 0 赞/ 23 阅读

相关 vue-绑定class样式

1、数组语法我们可以借助于v-bind指令来实现： HTML： <div id="app"> <div v-bind:class="active

喜欢ヅ旅行/ 2023年07月23日 09:56/ 0 赞/ 59 阅读

相关 vue-13 类与样式的绑定-自学视频

01 class绑定操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们 Vue.js v

àì夳堔傛蜴生んèń/ 2022年12月18日 15:53/ 0 赞/ 75 阅读

相关 vue样式绑定切换

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue中样式绑定</title> <

我会带着你远行/ 2022年05月25日 13:07/ 0 赞/ 279 阅读

相关 Vue_样式绑定

1.v-bind：class=‘\{activitded:isActivitded\} ’ class的对象绑定如果是是一个对象，\{red:’isRed’\}

客官°小女子只卖身不卖艺/ 2022年05月22日 13:23/ 0 赞/ 246 阅读

相关 Vue.js样式绑定

样式绑定 class和style时html元素的属性，可以使用v-bind来进行样式的yi绑定，以设置样式。 v-bind在绑定class和style时，Vue专门增强了它

布满荆棘的人生/ 2022年05月10日 06:34/ 0 赞/ 287 阅读

相关 VUE 样式绑定

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

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

相关 Vue-样式绑定

绑定class属性 v-bind:class="{样式名称：变量}" <!DOCTYPE html> <html> <head>

水深无声/ 2021年09月09日 08:08/ 0 赞/ 483 阅读

相关 Vue - 样式绑定

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

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