Vue 动态赋值 class

Vue 动态赋值 class

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

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

比较通用的是否赋值方式

1. 通过以下 :class="{show: show}" 的方式可以决定该元素是否拥有名称为 show 的 class
   
   • data() 中的 show 属性为 true ，则赋予 show class ，否则不赋予

<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. 注意使用三木运算符添加的属性语法和上述方式存在明显区别

<template>
    <div class="watch-mooc-panel" :class="show ? 'show' : 'hide'"></div>
</template>