Vue 样式绑定的实现方法

学习 Vue 的时候觉得样式绑定很简单，但是使用的时候总是容易搞晕自己。因为 :class 和 :style 里的数组语法和对象语法和 data 里绑定的值是不太一样的。这篇文章就简单对 Vue 绑定做个总结。

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

  • Class绑定
  • Style绑定

绑定Class

对象语法

data 里的属性是负责 toggle 是否要这个 class，也就是一般定义 Boolean 类型的值。

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

这里用 isActive 和 hasError 定义是否需要 active 和 text-danger 类。

data: {
 isActive: true,
 hasError: false
}

渲染为

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

数组语法

data 里负责定义 CSS 类名。

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

这里定义了 activeClass 和 errorClass 的 CSS 类名是 active 和 text-danger。

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

渲染为

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

混合写法

可以用混合的形式来绑定 class，即数组语法里写对象语法。所以 data 里的数据主要用于：

  1. 是否需要某个 class
  2. 定义 "class" 里面的类名
<div :class="[{ active: isActive }, errorClass]"></div>

这里定义了 errorClass 的 CSS 类名为 text-danger，并用 isActive 定义是否需要 active 类。

data: {
 errorClass: 'text-danger',
 isActive: true
}

渲染为

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

绑定Style

对象语法

data 里的属性是定义 style 里的值。与 class 不一样，class 是定义是否要这个 class的。

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

这里定义了 style 里的 color 和 font-size 的值。

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

渲染为

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

数组语法

可以绑定多个样式对象到 style 上

<div :style="[baseStyles, overridingStyles]"></div>

这里在 data 里用 styleObject 定义了 color 和 font-size，再用 overridingStyles 定义了 background 和 margin。然后在组件里用数组进行混合绑定。

data: {
 styleObject: {
  color: 'red',
  fontSize: '13px'
 },
 overridingStyles: {
  background: 'green',
  margin: '13px'
 }
}

渲染为

<div style="color: red; font-size: 13px; background: green; margin: 13px;"></div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js入门教程之绑定class和style样式

    一.前言 相信大家都知道数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 二.绑定 HTML Class 请注意:尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}&quo

  • Vue 框架之动态绑定 css 样式实例分析

    今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式 先看下面的第一个小实例: 源代码 html 文件: 请看注释 <!DOCTYPE html>

  • Vue.js每天必学之Class与样式绑定

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 尽管可以用 Mustache 标签绑定 class,比如 `{% raw %}class="{{ className }}"

  • vue.js绑定class和style样式（6）

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

  • vuejs绑定class和style样式

    绑定Html 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="s

  • vue绑定class与行间样式style详解

    一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { background: #000; /*background: green;*/ } </style> window.onload = function(){ var c = new Vue({ el : '#box', data : { red_color : 'red', bg_color : 'b

  • vue.js学习笔记之绑定style样式和class列表

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q

  • Vue.js基础学习之class与样式绑定

    打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head> <meta charset="utf-8"> <title>Vue test</title> <style type="text/css"> body {font-family: Verdana;} p { fo

  • Vue 样式绑定的实现方法

    学习 Vue 的时候觉得样式绑定很简单,但是使用的时候总是容易搞晕自己.因为 :class 和 :style 里的数组语法和对象语法和 data 里绑定的值是不太一样的.这篇文章就简单对 Vue 绑定做个总结. 操作元素的class列表和内联样式是数据绑定的一个常见需求,因为它们都是属性,所以可用v-bind处理,通过表达式计算出字符串结果即可.不过字符串拼接麻烦且易错.因此,在将v-bind用于class和style时,Vue做了专门增强,表达式结果类型除了字符串之外,还可是对象或数组. Cl

  • vue实现绑定事件的方法实例代码详解

    一.前言 vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 1. 直接在标签中写js方法  <button v-on:click="alert('hi')">执行方法的第一种写法</button> 2.调用method的办法 <button v-on:click="run()">执行方法的第

  • vue element-ui 绑定@keyup事件无效的解决方法

    解决办法: <el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input> 加上.native覆盖原有封装的keyup事件即可. 以上这篇vue element-ui 绑定@keyup事件无效的解

  • vue双向绑定数据限制长度的方法

    vue双向绑定数据如何限制长度?具体方法请阅读文章 问题描述 vue中输入框v-modle 双向绑定的数据:在需要的业务场景下需要对其进行字数长度限制: 解决方案 可以使用以下方法: 方法一: //方法一:输入框添加keypress方法:然后函数为: maxLength(attr,length){ let keyCode = event.keyCode; console.log("keyCode"); let len=0; console.log(this[attr].length);

  • Vue双向绑定实现原理与方法详解

    本文实例讲述了Vue双向绑定实现原理与方法.分享给大家供大家参考,具体如下: 昨天接到一个电话面试,上来第一个问题就是Vue双向绑定的原理.当时我并不知道如何监听数据层到视图层的变化,于是没答上来,挂电话后,我赶忙查了下资料,主要思路有如下三种. 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元素都将"订阅"一个发布者对象.任何时候如果JavaScript对象或者一个HTML输入

  • vue修改Element的el-table样式的4种方法

    修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style. 3. header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style. 4. header-c

  • vue 数据双向绑定的实现方法

    vue 数据双向绑定的实现方法

    1. 前言 本文适合于学习Vue源码的初级学者,阅读后,你将对Vue的数据双向绑定原理有一个大致的了解,认识Observer.Compile.Wathcer三大角色(如下图所示)以及它们所发挥的功能. 本文将一步步带你实现简易版的数据双向绑定,每一步都会详细分析这一步要解决的问题以及代码为何如此写,因此,在阅读完本文后,希望你能自己动手实现一个简易版数据双向绑定. 2. 代码实现 2.1 目的分析 本文要实现的效果如下图所示: 本文用到的HTML和JS主体代码如下: <div id="ap

  • Vue的样式绑定详解

    目录 1.样式绑定(class.style) 1.1绑定class 1.2绑定style 总结 1. 样式绑定(class.style) 1.1 绑定class 固定的类名就正常的写,需要动态绑定的类名就v-bind去绑定它 例如::class= "mood" 下面举一些适用的场景: 1.绑定class样式—字符串写法,适用于:样式的类名不确定,需要动态指定 2.绑定class样式 — 数组写法使用的场景 :绑定的样式的个数不确定,名字也不确定 3.绑定class样式 — 对象写法使用

  • vue元素样式实现动态改变方法介绍

    vue元素样式实现动态改变方法介绍

    目录 1 前言 2 动态改变样式的方法 2.1 操作元素class列表 2.2 操作元素内联样式 3 小结 1 前言   在vue项目中,很多场景要求我们动态改变元素的样式,比如按钮由不可点击到可以点击样式改变,这种情况下,我们通常根据vue框架提供的动态绑定v-bind来操作元素的class列表贺内联样式来达到动态设置元素样式的效果: 2 动态改变样式的方法 2.1 操作元素class列表 我们通过vue内置的:class (v-bind:class)来动态操作元素的class:如下所示: <

随机推荐