vue从入门到进阶:Class 与 Style 绑定(四)

前端开发 作者: 2024-08-20 20:40:01
绑定 HTML Class 对象语法 ①.添加单个class: 上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive为真还是假。 ②.添加多个class: 和如下

对象语法

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

data: {
  classObject: {
    active: true,'text-danger': false
  }
}


data: {
  isActive: true,error: null
},computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

="[activeClass,errorClass]"

data: {
  activeClass: 'active',errorClass: 'text-danger'
}
="active text-danger">
="[isActive ? activeClass : '',1)">>
="[{ active: isActive },1)">>

用在组件上

Vue.component('my-component'
})
my-component ="baz boo"my-component>
p ="foo bar baz boo">Hip>
>
="foo bar active">

对象语法

v-bind:style="{ color: activeColor,fontSize: fontSize + 'px' }"

data: {
  activeColor: 'red',fontSize: 30
}
="styleObject"

data: {
  styleObject: {
    color: 'red',fontSize: '13px'
  }
}

数组语法

="[baseStyles,overridingStyles]">

自动添加前缀

多重值

:style="{ display: ['-webkit-box','-ms-flexbox','flex'] }">
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65709.html