class与style绑定 | Yume Shoka = HaiLan's Blog

# 绑定 class 样式 -- 字符串写法

<div id="app">
			<!-- 绑定class样式--字符串写法 适用于：样式的类名不确定，需要动态指定-->
			<div class="basic" :class="mood" @click="changeMood">{{ emo }}			</div>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            emo: '演示效果',
            mood: 'normal'
        },
        methods: {
            changeMood() {
                this.mood = 'happy';
            }
        },
    })
</script>

# 绑定 class 样式 -- 数组写法

<!-- 准备好一个容器 -->
<div id="app">
    <!-- 绑定class样式--数组写法 适用于：要绑定的样式个数不确定，名字也不确定-->
    <div class="basic" :class="arr">{{ emo }}</div><br /><br />
</div>

	<script type="text/javascript">
	const vm = new Vue({
	el: '#app',
	data: {
	emo: '演示效果',
	arr: ['a1', 'a2', 'a3'],
	},
	methods: {
	changeMood() {
	const arr = ['happy', 'sad', 'normal'];

	this.mood = 'happy';
	}
	},
	})
	</script>

# 绑定 class 样式 -- 对象写法

<!-- 准备好一个容器 -->
<div id="app">
    <!-- 绑定class样式--对象写法 适用于：要绑定的样式个数确定，名字也确定，要动态决定是否用-->
    <div class="basic" :class="obj">{{ emo }}</div><br /><br />
</div>

	<script type="text/javascript">
	const vm = new Vue({
	el: '#app',
	data: {
	emo: '演示效果',
	obj: {
	a1: false,
	a2: false
	}
	},
	methods: {
	changeMood() {
	const arr = ['happy', 'sad', 'normal'];

	this.mood = 'happy';
	}
	},
	})
	</script>