Vue--绑定class样式

有三种方式:

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>
相关推荐
蚂蚁RichLab前端团队21 分钟前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光36 分钟前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军38 分钟前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5201 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy1 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days20501 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端1 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL1 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉1 小时前
Vue组件化开发介绍
前端·javascript·vue.js