2021-08-01 总结:v-bind绑定样式的五种方式

总结

1.数组绑定多个class

html: :class="['yanse','ziti']"
css: .yanse{}  .ziti{}

2.数组包含对象绑定class

html: :class="[{yanse:flag},'ziti']"
js>data: flag:true/false

3.数组包含方法绑定class

html: :class="[biankuangShow(),'ziti']"
js>methods: biankuangShow(){}

4.数组绑定多个style

html: :style="[ysStyle,ztStyle]"
js>data: ysStyle:{},ztStyle:{}

5.数组包含方法绑定style

html: :style="[ysStyle,zitiShow()]"
js>methods: zitiShow()

1.class方式

1.1.数组绑定多个class

例子

代码

<div id="app">
	<div v-bind:class="['yanse','ziti']">class 数组绑定多个class</div>
</div>
<script>
	new Vue({el:"#app"});
</script>
<style>
	.yanse{
		color:yellow;
		background:red;
	}
	.ziti{
		font-size:20px;
		font-weight:900
	}
</style>

结果:

1.2.数组包含对象绑定class

例子

代码

<div id="app">
	<div v-bind:class="[{yanse:flag},'ziti']">class 数组包含对象绑定</div>
</div>
<script>
	new Vue({
		el:"#app",
		data:{
			flag:true
			// flag:false
			},
	});
</script>
<style>
	.yanse{
		color:yellow;
		background:red;
	}
	.ziti{
		font-size:20px;
		font-weight:900
	}
</style>

结果

1.flag:true

2.flag:false

1.3.数组包含方法绑定class

例子

代码

<div id="app">
	<div v-bind:class="[biankuangShow(),'ziti']">class 数组包含方法绑定</div>
</div>
<script>
	new Vue({
		el:"#app",
		methods:{
			biankuangShow(){
				return'styleborder'
			}
		}
	});
</script>
<style>
	.styleborder{
		border:5px dotted gold;
	}
	.ziti{
		font-size:20px;
		font-weight:900
	}
</style>

结果:

2.style方式

2.1.数组绑定多个style

例子

代码

<div id="app">
	<div v-bind:style="[ysStyle,ztStyle]">style 数组绑定多个style</div>
</div>
<script>
	new Vue({
		el:"#app",
		data:{
			ysStyle:{
				color:"orange",
				background:"pink"
			},
			ztStyle:{
				fontSize:"20px",
				fontWeight:"900"
			}
		}	
	});
</script>

结果

2.2.数组包含方法绑定style

例子

代码

<div id="app">
	<div v-bind:style="[ysStyle,zitiShow()]">style 数组包含方法绑定</div>
</div>
<script>
	new Vue({
		el:"#app",
		data:{
			ysStyle:{
				color:"orange",
				background:"pink"
			}
		},
		methods:{
			zitiShow(){
				return {
					fontSize:"20px",
					fontWeight:"900"
				}
			}
		}
	});
</script>

结果