当前位置：首页 > news >正文

Vue-样式绑定-class

news 来源：原创 2025/5/20 9:54:27

样式绑定-class

字符串写法
数组写法
对象写法

字符串写法

使用场景： 样式类名不确定，需要动态绑定

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>样式绑定-class</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base{padding: 5px;height: 100px;}.gray{background-color: gray;}.blue{background-color: skyblue;}.orange{background-color: orange;}</style></head><body><div id="root"><h1>样式绑定-class</h1><div><h2>样式绑定-class  =>  字符串写法</h2><!-- class样式绑定 -> 字符串写法 场景: 样式类名不确定，需要动态绑定--><div class="base" :class="bgc" @click="changeBgc">{{name}}</div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",bgc:'gray'},methods: {changeBgc(){const arr = ['gray','blue','orange']const index = Math.floor(Math.random()*3)this.bgc = arr[index]console.log("背景色变成了：" + this.bgc)}}});</script>
</html>

效果

在这里插入图片描述

数组写法

使用场景：样式个数、名字不确定, 即可操作样式数组实现动态样式

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>样式绑定-class</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base{padding: 5px;height: 100px;}.gray{background-color: gray;font-size: 40px;}.blue{background-color: skyblue;font-weight: bold;}.orange{background-color: orange;color: blue;}</style></head><body><div id="root"><h1>样式绑定-class</h1><div><h2>样式绑定-class  =>  数组写法</h2><!-- class样式绑定 -> 数组写法 场景: 样式个数、名字不确定，即操作样式数组实现动态样式--><div class="base" :class="bgcArr">{{name}}</div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",bgcArr:['gray','blue','orange']}});</script>
</html>

效果

在这里插入图片描述

对象写法

使用场景：样式个数、名字确定，动态决定是否使用

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>样式绑定-class</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base{padding: 5px;height: 100px;}.gray{background-color: gray;font-size: 40px;}.blue{background-color: skyblue;font-weight: bold;}.orange{background-color: orange;color: blue;}</style></head><body><div id="root"><h1>样式绑定-class</h1><div><h2>样式绑定-class  =>  对象写法</h2><!-- class样式绑定 -> 对象写法 场景: 样式个数、名字确定，动态决定是否使用--><div class="base" :class="bgcObj">{{name}}</div><br><button @click="useGray">gray</button> <button @click="useOrange">orange</button> <button @click="noUse">null</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",bgcObj:{gray:false,orange:false}},methods: {useGray(){this.bgcObj.gray = !this.bgcObj.grayconsole.log(this.bgcObj.gray ? "使用gray" : "不使用gray")},useOrange(){this.bgcObj.orange = !this.bgcObj.orangeconsole.log(this.bgcObj.orange ? "使用orange" : "不使用orange")},noUse(){this.bgcObj.orange = false;this.bgcObj.gray = false;console.log("不使用gray、orange")}},});</script>
</html>