6.3Vue样式绑定

1.class的对象绑定

<style>
		.css{
			color: red;
		}
</style>
	
<div id="app" :class="{css:iscss}">//对象，css（样式名），iscss（true还是false）
    		<span>Hello World</span><br><br>
    		<button @click="btn">changeColor</button>
</div>
  	
<script>
		var vm = new Vue({
			el: "#app",
			data: {
				iscss: true
			},
			methods: {
				btn: function(){
					this.iscss=!this.iscss;
				}
			}
		})
</script>

2.class的数组绑定

//class数组绑定，里面是一个变量，显示变量里面的内容，即下文显示变量css里的内容，通过改变内容名改变样式
//数组不仅可以有一个变量，还能有多个

	<style>
		.csss{
			color: red;
		}
	</style>
	
	<div id="app" :class="[css]">//数组，值在vue实例中默认为空，点击为他赋值为“csss”样式
		<span>Hello World</span><br><br>
		<button @click="btn">changeColor</button>
	</div>
	 
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				css: ""
			},
			methods: {
				btn: function(){
					this.css = this.css === "csss" ? "" : "csss"//判断，切换样式
				}
			}
		})
	</script>

3.style的对象绑定

（内联的样式）

<div id="app" :style="css">//css对象，中括号写在vue实例中了
	<span>Hello World</span><br><br>
	<button @click="btn">changeColor</button>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			css: {
				color: "red"
			}
		},
		methods: {
			btn: function(){
				this.css.color = this.css.color === "red" ? "black":"red"
			}
		}
	})
</script>

4.style的数组绑定

<div id="app" :style="[css]">//数组，可以挂载多个对象，比如可以在后边跟["css",{fontSize:'100px'}]
	<span>Hello World</span><br><br>
	<button @click="btn">changeColor</button>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			css: {
				color: "red"
			}
		},
		methods: {
			btn: function(){
				this.css.color = this.css.color === "red" ? "black":"red"
			}
		}
	})
</script>