hb

Vue Class 与 Style 的动态绑定

Snipaste_20210318_212010.jpg

Class 对象语法

方式一:

        
  • 1
  • 2
  • 3
  • 4
<div class="static" :class="{ active: isActive, 'text-danger': hasError }" ></div>

对应的数据

        
  • 1
  • 2
  • 3
  • 4
data: { isActive: true, hasError: false }

结果渲染为:

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

方式二:

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

对应的数据

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
data: { classObject: { active: true, 'text-danger': false } }

结果渲染为:

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

Class 数组语法

方式一:

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

对应的数据

        
  • 1
  • 2
  • 3
  • 4
data: { activeClass: 'active', errorClass: 'text-danger' }

结果渲染为:

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

方式二(三元表达式):

        
  • 1
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

对应的数据

        
  • 1
  • 2
  • 3
  • 4
  • 5
data: { isActive:true activeClass: 'active', errorClass: 'text-danger' }

结果渲染为:

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

方式三:

        
  • 1
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

对应的数据

        
  • 1
  • 2
  • 3
  • 4
data: { isActive:true errorClass: 'text-danger' }

结果渲染为:

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

Style 对象语法

方式一:

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

对应的数据

        
  • 1
  • 2
  • 3
  • 4
data: { activeColor: 'red', fontSize: 30 }

结果渲染为:

        
  • 1
<div style="color: red;font-size: 13px;"></div>

方式二(更清晰):

        
  • 1
<div :style="styleObject"></div>

对应的数据

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
data: { styleObject: { color: 'red', fontSize: '13px' } }

结果渲染为:

        
  • 1
<div style="color: red;font-size: 13px;"></div>

Style 数组语法

方式一:

        
  • 1
<div v-bind:style="[baseStyles, overridingStyles]"></div>

对应的数据

        
  • 1
  • 2
  • 3
  • 4
data: { baseStyles: {color: 'red'}, overridingStyles: {fontSize: '13px'} }

结果渲染为:

        
  • 1
<div style="color: red;font-size: 13px;"></div>

方式二(特殊):

        
  • 1
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex。

本文参考Vue官方文档做记录

---end---

Article at   2021/03/18 21:20  Published  code  Category,viewed  543  times

Relevant tags:    Vue 

Address:   https://www.kedong.me/article/40

Copyright Notice: Freely reproduced for non-commercial use