引言

操作元素的 class 列表和内联样式是数据绑定的一个常见需求

因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可

不过，字符串拼接麻烦且易错. 因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强. 表达式结果的类型除了字符串之外，还可以是对象或数组。动态的绑定与修改

class绑定

绑定对象

给 :class 一个对象，以动态地切换 class，语法类似键值对, 布尔值的value决定了String类型的Key是否显示，大致语法 {className:Boolean}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>class绑定对象</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script><style>.nameHide {display: none;}</style></head><body><div id="app"><h1 :class="{'nameHide': nameActive}"> uiu </h1></div><script>let vm = new Vue({el: "#app",data: {nameActive: false},})</script></body>
</html>

nameActive为false时

nameActive为true时

当然,有一点很重要,那就是可以多个class并存

<h1 :class="{'nameHide': nameActive,'redFont':true}"> uiu </h1>

绑定数组

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>class绑定数组</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script><style>.blueBackground {background-color: blue;}.redFont {color: red;}</style></head><body><div id="app"><h1 :class="[nameFontClass.Background, nameFontClass.color]"> uiu </h1></div><script>let vm = new Vue({el: "#app",data: {nameFontClass: {Background: "blueBackground",color: "redFont"}},})</script></body>
</html>

style绑定

在前端开发中，内联样式经常被使用到，Vue 中内联样式绑定语法灵活

CSS 属性名可以用驼峰式 (camelCase) 或 短横线分隔 (kebab-case，记得用单引号括起来) 来命名.

小建议：如果，你曾使用过 React 或者将要学习它，建议采用与 React 同样的 CSS 属性代码风格驼峰式 (camelCase).

绑定对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>style绑定对象</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script></head><body><div id="app"><h1 :style="nameStyle"> uiu </h1></div><script>let vm = new Vue({el: "#app",data: {nameStyle: {'background-color': 'blue','color': 'red'}},})</script></body>
</html>

绑定数组

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>style绑定数组</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script></head><body><div id="app"><h1 :style="[blueBackground,redFont]"> uiu </h1></div><script>let vm = new Vue({el: "#app",data: {blueBackground: {'background-color': 'blue'},redFont: {'color': 'red'}},})</script></body>
</html>

自动前缀

在开发中，由于浏览器内核不同，使用某些 CSS 属性需要带各浏览器的前缀，然而如果你在 Vue 中使用了 v-bind:style你完全不用去考虑，因为 Vue 在编译过程中，会自动给需要前缀的属性加前缀

引申知识： 通过CANIUSE查看询 CSS 属性兼容性，自动前缀包 Autoprefixer、postcss

【Vue】Class与Style的绑定 —— 绑定对象与数组相关推荐

6.Vue Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易 ...
Vue.js：vue指令（给标签属性赋Vue变量v-bind，绑定事件 v-on）vue事件处理函数中, 拿到事件对象，6个事件修饰符
1. 给标签属性赋Vue变量v-bind 在vue中,v-bind指令可以动态的给标签的属性设置值, 语法:v-bind:属性名="vue变量" 简写::属性名="vue ...
Vue第一部分(3)：事件绑定与标签属性赋值
1.事件绑定:v-on指令基本使用在Vue中通过 v-on 指令给页面元素绑定事件. 语法: v-on:事件名="js代码片段或函数" //事件名=事件属性-on 比如:cl ...
Vue语法：类名和样式绑定
Vue语法:类名和样式绑定虽然类名class和样式style接收的类型都是字符串,但实际上类名是由数组拼接而成,而样式是由对键值对拼接而成. 通过字符串.数组.和对象三种方式为节点绑定类名属性: & ...
让jquery easyui datagrid列支持绑定嵌套对象
嵌套对象是指返回的json数据,是对象的某个属性自带有属性.而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的.比如:datagrid的field属性只能为fie ...
v-for 循环绑定对象和数组
<div id="app11"><div v-for="info in infos">&l ...
Spring-AOP @AspectJ进阶之绑定代理对象
概述实例概述使用this()或target()可绑定被代理对象实例,在通过类实例名绑定对象时,还依然具有原来连接点匹配的功能,只不过类名是通过增强方法中同名入参的类型间接决定罢了. 这里我们通过 ...
绑定到对象上的copyWithin方法
对于在数组上使用copyWithin方法应该都很熟悉,但是绑定到对象上呢? [].copyWithin.call({length: 5, 3: 1}, 0, 3) I just began to le ...
将json绑定为对象_了解自定义对象创建：JSON绑定概述系列
将json绑定为对象让我们看一下JSON绑定如何处理自定义对象的创建. 本系列的下一篇文章将介绍如何使用适配器自定义JSON-B. JSON-B期望所有类都有一个公共的无参数构造函数 ,在反序列化过 ...

【Vue】Class与Style的绑定 —— 绑定对象与数组

引言

class绑定

绑定对象

绑定数组

style绑定

绑定对象

绑定数组

自动前缀

【Vue】Class与Style的绑定 —— 绑定对象与数组相关推荐

最新文章

热门文章