vue基础五

发表于 | 分类于

vue 中 class 与 style 绑定

对象语法

单个绑定class

可以传给 v-bind:class 一个对象，以动态地切换 class

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

上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值

v-bind:class 指令可以与普通的 class 属性共存

template

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

script中的data

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

真正渲染为

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

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true ， class列表将变为 “static active text-danger”

绑定数据里的一个对象

template

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

script

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

渲染为

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

数组中的语法

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

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

script

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

渲染为

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

用在组件上

声明一个组件

1
2
3
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

然后在使用它的时候添加一些 class

1
<my-component class="baz boo"></my-component>

HTML 最终将被渲染成为

1
<p class="foo bar baz boo">Hi</p>

同样的适用于绑定 HTML class

1
<my-component v-bind:class="{ active: isActive }"></my-component>

当 isActive 为 true 的时候，HTML 将被渲染成为

1
<p class="foo bar active">Hi</p>

绑定内联样式

template

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

script

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

直接绑定到一个样式对象通常更好，让模板更清晰
template

1
<div v-bind:style="styleObject"></div>

script

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