vue使用动态样式与计算属性实现多变量判断

一、动态class绑定

代码：class的计算属性着重于减少页面内含大量逻辑判断导致代码阅读性差

<template>
	<div class='Event' :class='classObject'>
		通过动态样式绑定与计算属性实现color变化
	</div>
</template>
<script>
export default {
	data(){
		return{
			state:1,
		}
	},
	computed: {
	  classObject: function () {
	  	// 计算属性中 `this` 指向 vm 实例 即可以通过this访问data中的值
	    switch(this.state){
			case 1 :
			case 2 :
			return 'submit'
			case 3 :
			return 'supply'
			case 4 :
			case 5 :
			case 6 :
			return 'push'
		}
	  }
	}
}
</script>
<style>
	.submit{color:'blue'}
	.submit{color:'red'}
	.submit{color:'pink'}
</style>

vue的计算属性会基于vue的响应式依赖进行缓存，只有当响应式依赖发生改变时才会重新求值，否则会立即返回之前的计算结果，而不会再次执行函数。
即state的值不发生更改，计算属性便不会多次触发。
此方法可以避免动态绑定上性能开销较大的运算，如多层的三目运算符，多个变量判断等等。
但使用计算属性必然会产生缓存，如果要避免缓存请使用其他方法。

二、动态style绑定

代码：style需传入值或直接填入样式，返回值需为字符串。主要在于可灵活搭配,对传参格式不限定但会导致逻辑代码和返回代码过多，减低代码阅读性

<template>
	<div class='Event' :style='styleObject'>
		style传入值方法实现动态样式绑定
	</div>
	<div class='Event' :style='styleListObject'>
		style传入样式方法实现动态样式绑定
	</div>
</template>
<script>
export default {
	data(){
		return{
			color:'pink',
			style:'font-size:28px;color:blue',
		}
	},
	computed: {
	  styleObject: function () {
	  	// 计算属性中 `this` 指向 vm 实例 即可以通过this访问data中的值
	  	return `color:${this.color}`
	  },
	  styleListObject:function (){
		return this.style
	  }
	}
}
</script>

总结

在实现上，动态class绑定更适合页面内判断，使页面判断更加可观。而动态style绑定适合作为组件样式更换，在使用动态style时需避免大量逻辑堆积在一个计算属性中。
在本文例子上，可使用数组语法进行优化，避免多个判断同时出现
如：

<template>
	<div class='Event' :style='[classObject,styleObject]'>
		有事没事的小帅哥，靓女们点个关注谢谢啦。
	</div>
</template>
<script>