欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue实践之项目积累-----样式绑定(class与style)

程序员文章站 2022-05-15 18:41:59
...

在实际应用中,同种元素的不同状态的不同样式这是一个很常见的需求。我们通常用v-bind来处理他们,在vue中,v-bind用于绑定class和style时,表达式结果的类型除了字符串之外,还可以是对象或者数组。这里都是属性,有时会计算(computed)


class

对象:

<div v-bind:class="{ active: isActive }"></div>

当isActive为真时,成立,这里是一个对象的情况下,还可以渲染多个对象

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

在Vue中,class和:class可以同时使用

数组:

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

或者:

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

内联样式主要使用style绑定

style

:style的语法与CSS十分相似,但他实质上是一个JS对象。通常直接绑定一个对象会让可读性更高也更清晰

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

 

相关标签: Vue 样式绑定