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
	}
<