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>
相关推荐
哆啦A梦15881 小时前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app
智码看视界2 小时前
老梁聊全栈系列:(阶段一)架构思维与全局观
java·javascript·架构
小周同学@4 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok4 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~4 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号4 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌4 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康5 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海5 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏6 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端