VueJs - 包括常量和动态值的类

【问题标题】：VueJs - class including constants and dynamic valuesVueJs - 包括常量和动态值的类
【发布时间】：2017-10-12 19:26:31
【问题描述】：

我想给Vue中的一个元素添加一个常量和一个动态类：

<div :class="button {'button-danger':danger}">Button</div>

应始终应用类“button”，仅当属性 'danger' 为 true 时才应用“button-danger”。

【问题讨论】：

标签： css data-binding vue.js vuejs2

【解决方案1】：

就这么简单。

<div class="button" :class="{'button-danger':danger}">Button</div>

或者

<div :class="{button: true, 'button-danger':danger}">Button</div>

console.clear()

new Vue({
  el: "#app",
  data:{
    danger: true
  }
})

.button-danger {
  color: red
}
.button {
 border: 1px solid black
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
  <div class="button" :class="{'button-danger':danger}">Button</div>
  <div :class="{button: true, 'button-danger':danger}">Second Button</div>
  <button @click="danger = !danger">Toggle</button>
</div>

【讨论】：