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

一、前言

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

二、绑定 HTML Class

请注意：尽管可以用 Mustache 标签绑定 class，比如 class="{{ className }}" ，但是我们不推荐这种写法和 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 列表将相应地更新。例如，如果 isB 变为 true，class 列表将变为 "static class-a class-b"。

你也可以直接绑定数据里的一个对象：

<div v-bind:class="classObject"></div>
data: {
 classObject: {
 'class-a': true,
 'class-b': false
 }
}

我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式。

数组语法

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

<div v-bind:class="[classA, classB]">
data: {
 classA: 'class-a',
 classB: 'class-b'
}

渲染为：

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

如果你也想根据条件切换列表中的 class，可以用三元表达式：

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

此例始终添加 classA，但是只有在 isB 是 true 时添加 classB 。

二、绑定内联样式

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 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]">

自动添加前缀

当 v-bind:style 使用需要厂商前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

四、总结

以上就是为大家整理的vue.js绑定class和style样式的全部内容，文章介绍的很详细，具有一定的参考学习价值，希望对大家学习vue.js能有所帮助，小编还会陆续更新关于vue.js的信息，感兴趣的朋友们请继续关注我们。

赞 (0)

相关推荐

  • Vue的Class与Style绑定的方法

    本文介绍了Vue的Class与Style绑定,分享给大家,具体如下: 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换 class: <style> .exp{ border: 1px solid #ccc; } .forExp{ background: blue; } </style> <div class="exp" v-bind:class="{newExp:isNewExp}"

  • 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">

  • 学习vue.js中class与style绑定

    关于vue.js中class与style绑定的练习代码,分享给大家,供大家参考: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs中Class与Style 绑定</title> <link rel="stylesheet" href="css/vu

  • 详解vue.js之绑定class和style的示例代码

    一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }"></div>.class后面的双引号里接受一个对象字面量/对象引用/数组作为参数, 这里,{active: isActive}是对象参数,active是class名,isActive是一个布尔值.下面是一个例子: 绑定对象字面量 html: <div id="classBind">

  • 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和style样式

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

  • Vue.JS入门教程之事件监听

    你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数传入,同时这个 event 会带有 targetVM 属性,指向触发该事件的相应的 ViewModel: <div id="demo"> <a v-on="click: onClick">触发一个方法函数</a> <a v-on

  • Vue.JS入门教程之处理表单

    本文实例为大家分享了Vue.JS表单处理的相关内容,供大家参考,具体内容如下 基本用法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.m

  • Vue.JS入门教程之列表渲染

    你可以使用 v-repeat 指令来基于 ViewModel 上的对象数组渲染列表.对于数组中的每个对象,该指令将创建一个以该对象作为其 $data 对象的子 Vue 实例.这些子实例继承父实例的数据作用域,因此在重复的模板元素中你既可以访问子实例的属性,也可以访问父实例的属性.此外,你还可以通过 $index 属性来获取当前实例对应的数组索引. <ul id="demo"> <li v-repeat="items" class="ite

  • vue.js入门教程之计算属性

    前言 计算属性是用来声明式的描述一个值依赖了其它的值.当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM.这个功能非常强大,它可以让你的代码更加声明式.数据驱动并且易于维护. 模板中表达式非常便利,但是它们实际上只用于简单的操作. 模板是为了描述视图的结构,在模板中放入太多的逻辑会让模板过重且难以维护. 这就是为什么 Vue.js 将绑定表达式限制为一个表达式, 如果需要多于一个表达式的逻辑,应当使用计算属性. 来看这一个简单的例子 <div i

  • vue.js入门教程之基础语法小结

    前言 Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化. <!-- html --> <div id="demo"> <p>{{message}}</p> <input v-model="message"> </div> new

  • Vue.JS入门教程之自定义指令

    基础 Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令.定义对象需要提供一些钩子函数(全部可选): bind: 仅调用一次,当指令第一次绑定元素的时候. update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值:以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数. unbind:仅调用一

  • 一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)

    一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ,因此在我的书里边就没有多说.但是最近总结小伙伴遇到的问题,感觉很多人对前后端分离开发还是两眼一抹黑,所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事,算是一个简单的入门科普吧. 前后端不分 后端模板:Jsp.FreeMarker.Velocity 前端模板:Thymeleaf 前

  • 前端Vue单元测试入门教程

    目录 一.为什么需要单元测试 二.如何写单元测试 三.测试工具 四.Jest入门 安装 简单示例 Jest Cli 使用配置文件 使用 Babel vue-cli 中使用 Jest 常见示例 判断值相等 检查类false值 数字大小比较 字符串比较 数组和类数组 异常 只执行当前test 测试异步代码 回调函数 Promises Async/Await 安装和拆卸 测试前和测试后 测试用例分组 执行顺序 mock 函数 测试mock mock的返回值 模拟接口返回 mock函数的匹配器 五.Vu

随机推荐