vue class与style的动态绑定_style动态绑定-CSDN博客

文章目录

最近准备更新下新做的项目，新项目不难，但是工期比较短，用到的小知识点还是比较多的，尤其是动态的class 之类的，准备更新一波语法，例如class啊，路由啊等等，最后把项目简单的讲讲，方便以后复用些代码
这里先附上官方文档写的
https://cn.vuejs.org/guide/essentials/class-and-style.html
其实官方文档写的很详细了，但是呢很多人并不喜欢看官方文档，我记得之前实习的时候，我同事跟我说，多看看官方文档，一直不以为然，也许看官方文档需要个时间的积累吧，因为有的官方文档确实写的很简略。

class

字符串用法

 <div :class="classStr">class绑定模型数据（字符串语法）</div>
 data:{
        classStr:'bgRed'
    }
// 渲染dom 结果
 <div class="bgRed"> class绑定模型数据（字符串语法） </div>

数组用法

<div :class="classArr">class绑定模型数据（数组语法）</div>
data:{
   // 一个值对应一个类名
   classArr: ['bgGreen','fontRed'],
}
// 渲染dom 结果
 <div class="bgGreen fontRed"> class绑定模型数据（数组语法） </div>

<div :class="['bgGreen', 'fontRed']">class绑定模型数据（数组语法）</div>

数组中使用三元表达式
<div :class="['red', 'thin', isactive?'red':'yellow']">内容</div>
说明：如果“isaction”的布尔值为true，那么使用“red”类，否则“yellow”。

<div :class="['red', 'thin', {'active': isactive}]">内容</div>
说明：“ {'active': isactive}”中的“isactive”的值为true时，那么使用该类。为false就不使用该类。

<div :class="[ activeClass, errorClass ]">111</div>
data() {
      return {
         activeClass: "active",
         errorClass: "text-danger"
       };
     },
  渲染结果：<div class="active text-danger"> 111 </div>

对象用法

<h1 v-bind:class="classObj">class绑定模型数据（对象语法） </h1>  
data:{
	classObj: {
	     bgBlue: true,
	     'text-danger': true
	 },
}

<div class="static" :class="{'active':isActive,'error':isError}"></div>

<div class="test" :class="{ active: isActive }">111</div>
   data() {
      return {
         isActive: true
       };
     },
   // 渲染dom 结果
   <div class="test active"> Ananiah </div>

<div :class='classObj'>11</div>
computed:{
  classObj(){
   return active: this.isActive 
}
在计算属性中使用

style

字符串用法

数组用法

不推荐

对象用法

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="{ 'font-size': fontSize + 'px' }"></div>

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

<div :style="styleObject"></div>
data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}