Vue 绑定style和class样式的写法
更新时间：2023年10月17日 09:41:46 作者：小吴吴吴呀
class 与 style 绑定就是专门用来实现动态样式效果的技术,如果需要动态绑定 class 或 style 样式,可以使用 v-bind 绑定,本文给大家讲解Vue 绑定style和class样式,感兴趣的朋友一起看看吧
在应用界面中，某些元素的样式是动态的。class 与 style 绑定就是专门用来实现动态样式效果的技术。
如果需要动态绑定 class 或 style 样式，可以使用 v-bind 绑定。
绑定 class 样式【字符串写法】
适用于：类名不确定，需要动态指定。
.box{
width: 100px;
height: 100px;
}
.aqua{
background-color: aqua;
}
.red{
background-color: red;
}
<div id="APP"> <div class="box" :class="back" @click="toggleBack">点击变成红色</div> </div>
注：第二个 class 使用的是 v-bind 简写的方式， :class=" " 。
const vm = new Vue({
el: "#APP",
data(){
return {
back:"aqua"
}
},
methods:{
toggleBack(){
this.back = "red";
}
}
});
点击前：
点击后：
绑定 class 样式【数组写法】：
适用于：要绑定多个样式，个数不确定，名字也不确定。
.box{
width: 100px;
height: 100px;
}
.aqua{
background-color: aqua;
}
.border{
border: 20px solid red;
}
.radius{
border-radius: 25px;
}<div id="APP"> <div class="box" :class="classArr">多个class样式</div> </div>
const vm = new Vue({
el: "#APP",
data(){
return {
classArr:["aqua","border","radius"]
}
}
});
如果要绑定多个样式，个数确定，但是名字不确定，也可以使用以下写法：
<div id="APP"> <div class="box" :class="[a,b,c]">多个class样式</div> </div>
const vm = new Vue({
el: "#APP",
data(){
return {
a: "aqua",
b: "border",
c: "radius"
}
}
});
注：效果与上边的示例相同，a、b、c 都是变量，控制是否使用某个 class 样式。
到此这篇关于Vue 绑定style和class样式的方式的文章就介绍到这了,更多相关Vue 绑定style和class内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue 动态添加el-input的实现代码，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-06-06
本文主要介绍了Vue使用lodash进行防抖节流的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
本文主要介绍了Vue3实现简约型侧边栏的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了在antd Form表单中select设置初始值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue中遇到scrollIntoView无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue中改变滚动条样式的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了Vue3计算属性和异步计算属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue开发中调用微信jssdk的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue2.0中goods选购栏滚动算法的实现代码,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了Vue如何比较字符串变化并高亮变化的部分问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
最新评论