探索vue框架的世界: 内部、外部样式和内联样式动态绑定的方法

在实际项目中，经常会遇到这样的场景，可以通过逻辑层中设定的变量，在视图层中来呈现不同的样式，那么这种动态绑定样式的方式如何实现呢？
本篇文章，博主将和大家分享动态绑定内联样式style 和 动态绑定内部和外部样式class 的几种常用的方法。 希望走过路过的客观多多指教，并使用您发财的小手留下您宝贵的肯定👍👍👍🤞。

注意：测试以vue2.0的选项式写法为例，首先，在逻辑层的data中预置变量

 export default{name:'',data(){return{activeId:1,activeAvatarName:'dongdong',classObj:{active:true,disabled:false},isActive:true,isRefresh:true,activeColor:'red',width:16,activeStyles:{color:'red',fontSize:'14px'},otherStyles:{},	boxColor:'red'}},computed:{classObj:function(){return {active:this.isActive,refresh:this.isRefresh}}}}

一、动态绑定内联样式 style

👉1.1、对象方式绑定

• 方式1 :对象中使用变量赋值

  <div :style="{color:activeColor,width:width+'px'}"></div>
  

• 方式2：对象中使用三目运算符

  <div :style="{color:(index==16?activeColor:'#000')}"></div>
  

👉1.2、数组方式绑定

• 方式1：数组中实现全部的动态绑定

  <div :style="[activeStyles,otherStyles]"></div>
  

• 方式2：数组中可以实现部分动态绑定，部分静态赋值

  <div :style="[{color:(index==16?activeColor:'#000')},{fintSize:'18px'}]"></div>
  

👉1.3、三目运算符方式绑定

• 方式1：三目运算可以写在括号中，也可以删除括号

  <div :style="{color:(index==1?boxColor:'#000')}"></div><div :style="{color:index==1?boxColor:'#000'}"></div>
  

• 方式2：数组中使用三目运算，需要写在对象中

  <div :style="[{color:(index==1？boxColor:'#000')},{pointer-events:'none'}]"></div>
  

• 方式3：也可以字符串的方式书写三目运算

  <div :style="item.avatarName===activeAvatarName?'font-weight:700':'font-weight:400'"></div>
  

二、动态绑定内外部样式 class

2.1、对象方式绑定

• 类的名称一般都是用字符串，比如active , 以下表达式判断元素是否绑定一个名叫active的类

  <div :class="{'active':isActive}"></div>
  <div :class="{'active':boxColor=='red'">{{name}}</div>
  <div :class="{'active':activeId==item.uid}"{{item.userName}}</div>
  

• 可判断并绑定多个类，用逗号隔开

  <div :class="{'active':isActive,'refresh':isRefreshr}"></div>
  

• 可放在data里，造一个对象出来

  <div :class="classObj">{{name}}</div>
  

• 使用computed属性 根据data里的值变化

  <div :class="classObject">{{name}}</div>
  

2.2、数组方式绑定

• 使用单纯的数组

  <div :class="[isActive,isRefresh]">{{userName}}</div>
  

• 数组与三目运算符相结合，注意，动态绑定的style，三目运算只能写在对象中，而数组方式动态绑定的class，可以在数组中使用三目运算

  :class="[isActive?'active':'']"
  

• 元素需要的类名一定要加" " 双引号，如果这个类名写在对象中可以不加

  :class="[{active:isActive},'disabled']"