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>
相关推荐
慧一居士30 分钟前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖1 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1011 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js