小编给大家分享一下Vue如何实现样式绑定，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1. 样式绑定（class、style）1.1 绑定class固定的类名就正
小编给大家分享一下Vue如何实现样式绑定，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
固定的类名就正常的写，需要动态绑定的类名就v-bind去绑定它
例如：:class= "mood"
下面举一些适用的场景：
绑定class样式—字符串写法，适用于：样式的类名不确定，需要动态指定
绑定class样式 — 数组写法使用的场景 ：绑定的样式的个数不确定，名字也不确定
绑定class样式 — 对象写法使用的场景：绑定的个数确定的，名字也确定，不确定的是用不用该类名
<body> <style> .basic { width: 100px; height: 100px; border: 2px solid black; } .happy { width: 100px; height: 100px; border: 2px solid orange; background-color: palevioletred; } .sad { width: 100px; height: 100px; border: 2px solid black; background-color: silver; } .nORMal { width: 100px; height: 100px; border: 2px solid greenyellow; background-color: sandybrown; } .outline { border-radius: 20%; } .color { color: skyblue; } .size { font-family: '微软雅黑'; font-size: 20px; font-weight: bold; } </style> <div id="root"> <!-- 需求1 ：点击div1 随机切换mood 绑定class样式 --- 字符串写法 1. 固定的class类名就正常写，需要动态指定的class类名就 :class="xxx" 写到这里面 2. 使用的场景 : 样式的类名不确定，需要去动态指定 --> <div class="div1 basic" :class="mood" @click="random">{{name}}</div> <!-- 需求2 ： 点击div2 添加类,或者删除类 绑定class样式 --- 数组写法 1. 使用的场景 ：绑定的样式的个数不确定，名字也不确定 2. shift() ：移除数组中第一个数据， push("xxx")；在末尾添加一个新的数据 --> <div class="div2 basic" :class="classArr" @click = "remove">{{name}}</div> <!-- 注意点：在vue操作下 " " 里面的写的字符串是表达式，" '' " 里面写的字符串就是值 --> <!-- <div class="div2 basic" :class="['outline','color','size']"></div> --> <!-- 需求3 ：在outline和color之间进行切换 绑定class样式 --- 对象写法 使用的场景：绑定的个数确定的，名字也确定，不确定的是用不用该类名 --> <div class="div3 basic" :class="classObj" @click="change">{{name}}</div> </div> <script> Vue.config.productionTip = false let vm = new Vue({ el: '#root', data: { name: "Hello,Vue!", mood: "normal", classArr:['outline','color','size'], classObj:{ outline:true, color:true } }, methods: { random() { let arr = ["happy", "sad", "normal"] // Math.floor : 表示向下取整, Math.random()：取值是0-1，1是取不到的 this.mood = arr[Math.floor(Math.random() * 3)] }, remove(){ this.classArr.shift() }, change(){ vm.classObj.color = !vm.classObj.color vm.classObj.outline = !vm.classObj.outline } } }) </script>例如：:style = "styleobj"
<div id="root" :> Hello,{{name}}! </div> <script> Vue.config.productionTip = false let vm = new Vue({ el: '#root', data: { name:"Vue", styleobj:{ fontSize: 50 + "px", color: "red", border:1+"px"+" "+"solid"+" "+"black" } } }) </script>以上是“Vue如何实现样式绑定”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！
--结束END--
本文标题: Vue如何实现样式绑定
本文链接: https://www.lsjlt.com/news/323386.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0