- lang="en">
- charset="UTF-8">
- name="viewport" content="width=device-width, initial-scale=1.0">
- http-equiv="X-UA-Compatible" content="ie=edge">
- Document
- .add-bg { background: cyan; } .add-color { color: #fff; } .add-fontsize
- { font-size: 18px; }
- src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
- id="app">
- class="add-fontsize" :class="{'add-bg': isActive,'add-color': addColor}">
- bind class
- :class="[addColor ?'add-color':'add-bg','add-fontsize']">
use 三元
- :class="[{'add-bg': isActive},'add-fontsize']">
- use object
- var App = new Vue({
- el: '#app',
- data() {
- return {
- isActive: false,
- // 改为 true 时就会展示对应的背景色
- addColor: false // 改为 true 时就会展示字体对应的颜色
- }
- }
- })
结果如下:
来源: http://www.bubuko.com/infodetail-2809442.html