vue中,动态绑定样式——动态绑定style写法 & 动态class写法
Posted viceen
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中,动态绑定样式——动态绑定style写法 & 动态class写法相关的知识,希望对你有一定的参考价值。
vue中,动态绑定样式——动态绑定style写法 & 动态class写法
1、动态绑定style写法
注意:
- 凡是有-的style属性名都要变成驼峰式,比如font-size要变成
fontSize
- 除了绑定值,其他的属性名的值要用引号括起来,比如
backgroundColor:'#00a2ff'
而不是 backgroundColor:#00a2ff
1.1、对象
<div :style=" color: activeColor, fontSize: fontSize + 'px' "></div>
<div :style="color:(index == 1 ? conFontColor:'#000')"></div>
1.2、数组
<div :style="[baseStyles, overridingStyles]"></div>
<div :style="[color:(index == 1 ? conFontColor:'#000'),fontSize:'18px']"></div>
1.3、三元运算符
<div :style="color:(index == 1 ? conFontColor:'#000')"></div>
<div :style="[color:(index == 1 ? conFontColor:'#000'),fontSize:'18px']"></div>
<div :style="item.layerName === activeLayerName?'font-weight:700' : 'font-weight:400'"></div>
<!-- 写法一 -->
<div :style="[float: id === '12' ? 'left:'right]"></div>
<!-- 写法二 -->
<div :style="float: nameList.length === 20 ? 'height:64px' : 'height:32px' "></div>
<!-- 写法三 -->
<div :style="border:( nameId ===item.id ?'2px solid #4C78FF': 'red')"></div>
1.4、绑定data对象
<div :style="styleObject"></div>
<script>
data()
return
styleObject:
color: 'red',
fontSize: '14px'
</scrip>
2、动态class写法
2.1、对象方法
<!-- isActive —— true/false -->
<div :class=" 'active': isActive ">name</div>
2.2、判断是否绑定一个active
<div :class="'active' : isActive == -2" >name</div>
<div :class="'active' : isActive == item.nameId" >item.name</div>
2.3、绑定并判断多个
2.31、第一种:用逗号隔开
<div :class=" 'active': isActive, 'user': isUser "></div>
2.32、放在data里面
<div :class="classObject">name</div>
<script>
data()
return
classObject: active: true, user:false
</script>
2.33、使用computed属性
<div :class="classObject">name</div>
<script>
data()
return
isActive: true,
isUser: false
,
computed:
classObject: function ()
return
active: this.isActive,
user:this.isUser
</script>
2.4、数组方法
2.41、单纯数组
<div :class="[isActive,isUser]">name</div>
<script>
data()
return
isActive:'active',
isUser:'user'
</script>
2.42、数组与三元运算符结合判断选择需要的class
- 注意:三元运算符后面的“:”两边的class需要加上单引号,否则不能正确渲染
:class="[isActive?‘active’:’’]"
或者
:class="[isActive1?‘active’:’’]"
或者
:class="[isActiveindex?‘active’:’’]"
或者
:class="[isActive==index?‘active’:‘otherActiveClass’]"
2.43、数组对象结合动态判断
//前面这个active在对象里面可以不加单引号,后面这个sort要加单引号
:class="[ active: isActive , ‘sort’]"
或者
:class="[ active: isActive1 , ‘sort’]"
或者
:class="[ active: isActiveindex , ‘sort’]"
05《Vue 入门教程》Vue 动态样式绑定
参考技术A本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完本小节之后对样式的绑定方式加以总结,再通过反复的练习来加深印象。
通过 v-bind 指令给 DOM 元素动态绑定 Class 和 Style,一般用于根据不同数据状态切换元素样式的场景下。
我们可以通过数组和对象的两种形式绑定元素的 Class。
通过传给 v-bind:class 一个对象,以动态地切换 class:
代码解释: 上面的语法表示 show 这个 class 存在与否将取决于数据属性 isShow 是否为真值。
具体示例:
实例演示
"运行案例" 可查看在线运行效果
代码解释: HTML 代码第 2 行,我们给 p 绑定样式,当 isHide 为真值时, 其渲染结果为 ,否则 。 打开控制台,修改 vm.isHide 的值可以动态改变页面效果。
此外, v-bind:class 指令也可以与普通的 class 属性共存。 语法:
当有如下模板:
和如下 data:
结果渲染为:
代码解释: 当 isShow 或者 hasError 变化时,class 列表将相应地更新。
例如,如果 hasError 的值为 true , isShow 的值为 true ,class 列表将变为 "defaultClass show text-danger" 。
例如,如果 hasError 的值为 true , isShow 的值为 false ,class 列表将变为 "defaultClass text-danger" 。
在之前介绍的案例中,我们将绑定的数据对象内联定义在模板里, 这样显得比较繁琐。其实,我们可以统一定义在一个 classObject 中:
实例演示
"运行案例" 可查看在线运行效果
结果渲染为:
代码解释: HTML 代码中,我们首先给 p 一个固定样式 defaultClass, 然后通过 classObject 给 p 绑定样式。 JS 代码 第 6-9 行,我们定义了数据 classObject,它有两个属性:1. 属性 show,值为 true,2. 属性 text-danger,值为 false。所以,最后页面渲染的效果是:
我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:
实例演示
"运行案例" 可查看在线运行效果
结果渲染为:
代码解释: HTML 代码中,我们通过 classObject 给 p 绑定样式。 JS 代码 第 6-11 行,我们定义了计算属性 classObject,它返回一个对象,该对象有两个属性:1. 属性 show,值为 true,2. 属性 text-danger,值为 false。所以,最后页面渲染的效果是:
我们可以把一个数组传给 v-bind:class ,以应用一个 class 列表:
实例演示
运行案例点击 "运行案例" 可查看在线运行效果
渲染为:
代码解释: 在 HTML 代码中,我们通过数组给 p 绑定样式,数组中有 classA 和 classB 两个值。 在 JS 代码第 6-7 行定义了 classA 和 classB 两个字符串,它的格式和元素 class 的格式相同,不同的样式类之间以空格相隔。
如果你也想根据条件切换列表中的 class,可以用三元表达式:
这样写将始终添加 classB 的样式,但是只有在 isShow 为真时才添加 showClass 。
不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象的形式来表达数组中的某一项:
代码解释: 在 HTML 中,p 绑定一个样式数组,数组第一项是一个对象表达式 showClass: isShow 。当 isShow 为 true 时样式最终绑定为: ;当 isShow 为 false 时样式最终绑定为: ;
和 Class 的绑定一样,Style 的绑定同样可以通过数组和对象的两种形式。
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
实例演示
"运行案例" 可查看在线运行效果
渲染为:
代码解释: 在 HTML 代码中,我们给 p 绑定 background-color 和 width 两个内联样式,它们的值在 data 中定义。
在模板中写较为复杂的表达式语法显得比较繁琐,通常直接绑定到一个样式对象更好,这会让模板显得更加清晰:
实例演示
"运行案例" 可查看在线运行效果
渲染为:
代码解释: 在 HTML 代码中,我们给 p 绑定数据 styleObject,它们的值在 data 中定义。
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:
实例演示
"运行案例" 可查看在线运行效果
渲染为:
本小节我们学习了如何通过 v-bind 来动态绑定样式。主要有以下知识点:
以上是关于vue中,动态绑定样式——动态绑定style写法 & 动态class写法的主要内容,如果未能解决你的问题,请参考以下文章