[Vue] vue学习笔记(3): 绑定样式

动态绑定样式

vue允许动态设置class的值，通过利用v-bind指令

🎄情景：
假设存在多个class样式，并给元素指定一个class = "basic", 类名随不同情况更改

<div id="root">
   <!--- 动态设置后，类名变为"basic happy" or "basic sad" or "basic normal" --->
   
   <!--- case1: change classname by clicking --->
   <!--- 字符串方法，适用于样式类名不确定，需要动态指定" --->
   <div class="basic" :class="mood" @click="changeMood">press me</div>
   
   <!--- case2: update/remove classnames of an element --->
   <!--- 数组方法：要绑定的样式个数不确定，名字也不确定，需要通过数组的shift/push方法指定数组中的类名" --->
   <div class="basic" :class="classArr">press me</div>
   
   <!--- case3: 啊八八八八八八 --->
   <!--- 对象方法：适用于样式个数名字都确定，需要动态决定用不用 --->
   <div class="basic" :class="classObj">press me</div>
   
   <!--- case4: 用style标签 --->
   <!--- style方法： --->
   <div class="basic" :style="styleObj">press me</div>
</div>

js脚本创建vue对象，随机选取字符串加入类名中

new Vue({
   el: '#root',
   data: {
   	mood: 'normal',
   	classArr: ['aa', 'bb', 'cc'],
   	classObj: {
		s1: false,
		s2: false
	},
	styleObj: {
		// vue内置专门指代css property的属性名
		fontSize: '40px',
		backgroundColor: 'blue'
	}
   },
   methods: {
   	changeMood(){
	  const arr = ['happy', 'sad', 'normal']
	  const index = Math.floor(Math.random() * 3)
	  this.mood = arr[index]
	}
   }
})