版權聲明：本文首發 http://asing1elife.com ，轉載請注明出處。 https://blog.csdn.net/asing1elife/article/details/82696881

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>