vue 绑定样式的几种方式

Posted zjx304

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 绑定样式的几种方式相关的知识,希望对你有一定的参考价值。

vue 绑定样式

对象语法

1.v-bind:class设置一个对象,动态切换class

<div :class="{‘active‘:isActive}">xxx</div>
样式是否起作用,根据isActive的布尔值是否为true

2.:class可以和class共存

<div class="static" :class="{‘active‘:isActive,‘error‘:isError}">xxx</div>
当isActive值为true,isError为false,样式为 static和isActive。
当isActive值为false,isError为true,样式为 static和isError。
当isActive值为true,isError为true ,样式为 static和isActive、isError

3. :class可以绑定数据中的对象

<div class="static" :class="classobj">xxx</div>
export default {
  data(){
    return{
      classobj:{               //可以直接绑定一个对象,对象里面有多个样式
        active:true,
        error:false
      }
    }
  }
}

 

 

数组语法

4.v-bind:class设置一个数组 

使用了数组就要在data中指定重命名

<div class="static" :class="[activeCls,errorCls]">xxx</div>
export default {
  data(){
    return{
      activeCls:‘active‘,      //相当于样式active样式在div中重命名 为activeCls
      errorCls:‘error‘
    }
  }
}
<style>
    .active{xxx}
    .error{xxx}
</style>

5.三元表达式

<template>
  <div id="app">
    <div class="static" :class="[isActive?activeCls:errorCls,baseClass]">xxx</div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      isActive:true,
      activeCls:‘active‘,           //当isActive值为true时,会执行activeCls对应的样式 active 并且执行baseClass对应的样式 baseclass
      errorCls:‘error‘,             //当isActive值为false时,会执行errorCls对应的样式 error 并且执行baseClass对应的样式 baseclass
      baseClass:‘baseclass‘
    }
  }
}
</script>
<style scoped>
.active{
  background: red;
}
.error{
  color: white;
}
.baseclass{
  text-align: center;
}
</style>

三元表达式

<div class="coupon-img" :class="[item.ticket_type==1?‘thirty-yuan‘:‘fifty-yuan‘]">

 

 

6.数组语法中使用对象语法

<template>
  <div id="app">
    <div class="static" :class="[{‘active‘:isActive},baseClass]">xxx</div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      isActive:true,                   //因为isActive值为true,样式为active 和 baseClass对应的 baseclass 所以样式为 active、baseclass
      activeCls:‘active‘,
      baseClass:‘baseclass‘
    }
  }
}
</script>
<style scoped>
.active{
  background: red;
}
.baseclass{
  text-align: center;
}
</style>

 7.定义一个数组通过不同索引值获取不同样式

<div class="icon" :class="classMap[support.type]"></div>
    created () {
      this.classMap = ["decrease", "discount", "guarantee", "invoice", "special"]
    },
    根据support.type的数组变化,索引到classMap对应的样式

 

 

绑定内联样式

 

<div id="app">
    <div :style="{color:cl,background:bk}">你好吗?</div></div>
<script>
    new Vue({
        el:‘#app‘,
        data:{
            cl:‘red‘,
            bk:‘yellow‘
        }
    })
</script>

直接绑定到一个样式对象,让模板更清晰:

<div id="app">
        <div :style="testObj">你好吗?</div>
</div>
<script>
    new Vue({
        el:‘#app‘,
        data:{
            testObj:{
                color:red;
                background:yellow;
            }
        }
    })
</script>

 

以上是关于vue 绑定样式的几种方式的主要内容,如果未能解决你的问题,请参考以下文章

vue动态绑定class的几种方式

vue动态绑定class的几种方式

Vue动态绑定class的几种方式

VUE中常用的几种引入方式

17.在vue中怎么动态样式类的几种方式

vue中的几种校验方式