今天就跟大家聊聊有关怎么在Vue.js中动态绑定样式，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
class属性绑定
1. 三目元算符方式：
计算
安全
数据库
网络和加速
企业服务
<!--vue代码-->
<ul>
<li v-for="item in itemData" :key="item">
<i :class="item.isA ? 'class_a' : 'class_b'"></i>
</li>
</ul>
<!-- CSS代码 -->
.class_a,.class_b{
/*这里可以写一些公共样式*/
}
.class_a{
/*这里写需要设置的第一种样式*/
}
.class_b{
/*这里写需要设置的第二种样式*/
}2. 基本绑定：
<!--vue代码-->
<div :class="{class_a:isActive}"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
isActive:true
}
}
}
<!-- CSS代码 -->
.class_a{
/*这里写需要设置的样式*/
}以上可以根据isACtive的值，动态判断来进行class样式的绑定。
特别说明：
1. vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量，可以通过 class="{{ className }}" 方式设置class，但是vue不推荐这种方式与 v-bind:class 的方式混用，二者只能选其一。
2. v-bind:class 虽然与class属性里绑定变量的方式不能共存，却可以与原生的class特性共存，即 一个DOM标签中允许同时出现原生class和v-bind:class。
3. 为了避免不必要的问题，要写在data中的值尽量不要用中划线，可以采用下划线～如果data中用中划线的话，需要加单引号，否则出错，而且，在v-bind中使用时，也需要加单引号。加上单引号又无法识别数据，默认为true。
3. 可以传入多个属性动态切换多个class
<!--vue代码--> <div :class="{class_a:isActive,class_b:isActive_b}"></div>4. 对象绑定
<!--vue代码-->
<div ：class="classObject"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
classObject:{
class_a:true,
class_b:true
}
}
}
}
<!-- CSS代码 -->
.class_a{
/*这里写需要设置的第一种样式*/
}
.class_b{
/*这里写需要设置的第二种样式*/
}特别说明：
这里v-bind直接利用对象进行绑定，需注意对象中的键名应与class样式名保持一致。
5. 数组绑定
数组里的变量改变时，动态更新class列表
<!--vue代码-->
<div ：class="[classA,classB]"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
classA:'class_a',
classB:'class_b'
}
}
}
<!-- CSS代码 -->
.class_a{
/*这里写需要设置的第一种样式*/
}
.class_b{
/*这里写需要设置的第二种样式*/
}6. 绑定返回对象的计算属性
强大且常用的模式～
<!--vue代码-->
<div v-bind="classObject"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
isActive:true
}
},
computed:{
classObject:function () {
return{
class_a:this.isActive,
class_b:!this.isActive
// 这里要结合自身项目情况修改填写
}
}
}
}
<!-- CSS代码 -->
.class_a{
/*这里写需要设置的第一种样式*/
}
.class_b{
/*这里写需要设置的第二种样式*/
}style属性绑定（内联）
1. 直接设置样式
<!--vue代码-->
<div ：></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
selectedColor:pink,
fontSize:20
// 注意前后名称的一致性
}
}
}2. 也可以使用对象
（可以参照上述class）
<!--vue代码-->
<div ：></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
styleObject{
selectedColor:pink,
fontSize:20
}
}
}
}3. 使用数组
<!--vue代码-->
<div :></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
export default {
name: "test1",
data(){
return{
styleA:{
color:'red',
fontSize: '30px'
},
styleB:{
color:'green',
fontSize: '15px'
},
}
}
}看完上述内容，你们对怎么在Vue.js中动态绑定样式有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
