Vue 动态赋值 class

Vue 在操作 DOM 元素的 class 属性时,有以下多种方法

比较通用的是否赋值方式

  1. 通过以下 :class="{show: show}" 的方式可以决定该元素是否拥有名称为 show 的 class
    • data() 中的 show 属性为 true ,则赋予 show class ,否则不赋予
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
	<div class="watch-mooc-panel" :class="{show: show}"></div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'mooc',
    data() {
      return {
        show: false
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    .watch-mooc-panel
      width 100%
      height 100%
      position absolute
      transition background-color .3s
      &.show
        background-color #000000
</style>

使用三目运算符的方式

  1. 注意使用三木运算符添加的属性语法和上述方式存在明显区别
1
2
3
<template>
	<div class="watch-mooc-panel" :class="show ? 'show' : 'hide'"></div>
</template>