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-router4动态路由刷新404/白屏的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
本文主要介绍了vue实现登陆页面开发实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了vue与django集成打包的实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了vue中使用路由改浏览器标题和图标，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本篇文章主要介绍了Vuejs 组件——props数据传递的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要介绍了vue中 render 函数功能与原理,结合实例形式分析了vue中render函数的基本功能、原理及相关操作注意事项,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue-cli3项目展示本地Markdown文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
在本篇文章中小编给大家分享了关于如何使用Vue.js方法创建模板并使用多个模板合成的相关知识点内容，需要的朋友们学习下。2019-06-06
这篇文章主要介绍了Antd下拉选择,自动匹配功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Element-UI 使用el-row 分栏布局的教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论