Vue--绑定class样式

名字越长技术越强2024-10-23 23:47

有三种方式：

1、字符串写法(freeA)

适用于：样式的类名不确定，需要动态指定

2、数组写法(freeB)

适用于：要绑定的样式个数不确定，名字也不确定

3、对象写法(freeC)

适用于：要绑定的样式个数确定，名字确定，但是要动态决定是否

对象写法简写

复制代码

<button style="width: 5rem;height: 3rem;"  :class="{样式名：true|false}}" @click="test"></button>
如
<button style="width: 5rem;height: 3rem;"  :class="{greeC:freeCC}" @click="test"></button>

demo如下

复制代码

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
	
	.redC{
		background-color: red;
	}
	.greeC{
		background-color: gray;
	}
	.pinC{
		background-color: pink;
	}
	
</style>

<div id="app">{{ message }}
<button style="width: 5rem;height: 3rem;"  :class="freeA" @click="test"></button>
<button style="width: 5rem;height: 3rem;"  :class="freeB" @click="test"></button>
<button style="width: 5rem;height: 3rem;"  :class="freeC" @click="test"></button>
</div>
<script>
//  vue2
let vm=new Vue({
  el: '#app',
  data: {
	  	  message:'阿萨德',
	  x:'',
	  y:'',
	  z:{
		za:1
	  },
	  freeB:['redC','greeC'],
	  freeA:'redC',
	  freeC:{
		pinC:true
	  }
  },
  methods:{
	
  },
  
})

</script>