杂

1.如果想显示{{}}标签，而不进行替换，使用v-pre即可跳过这个元素和它的子元素的编译过程，例如：

<span v-pre>{{这里的内容是不会被编译的}}</span>

2.绑定class的几种方式
对象语法

<div id="app">
	<div class="static" :class="{'active' : isActive, 'error': isError}"></div>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			isActive: true,
			isError: false
		}
	})
</script>

当:class的表达式过长或者逻辑复杂时，还可以绑定一个计算属性

<div :class="classes"></div>
computed: {
	classes() {
		return {
			active : this.isActive;
			'text-fail': this.isError
		}
	}
}

数组语法

<div id="app">
	<div class="static" :class="[isActive ? 'active' : '', errorCls]"></div>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			isActive: true,
			errorCls: 'error' // error这个class永远被渲染
		}
	})
</script>

3.绑定内联样式

<div :style="{'color': color, 'font-size': fontSize + 'px'}">文本</div>
data: {
	fontSize: 12,
	color: 'red'
}

<div :style="styles"></div>
data: {
	styles: {
		color: 'red',
		fontSize: '14px'
	}
}

<div :style="styles"></div>
computed: {
	styles() {
		return {
			color: 'red',
			fontSize: '14px'
		}
	}
}