vue动态绑定样式 动态绑定class & style

 目录

一、动态绑定class 

 1.判断是否绑定一个类名

2.判断是否绑定一个active

3. 判断绑定多个

4. 把需要绑定的类名储存到data中

5.三元判断

6.动态静态结合

# 完整代码

二、动态绑定style写法

1.对象绑定

2.数组绑定

3. 三元运算符

4.绑定data对象

5. 动态静态结合

# 完整代码

---

一、动态绑定class 

项目中会需要根据不同的情况判断是否添加类名

 1.判断是否绑定一个类名

<div :class="{ 'active': isActive }">1</div>

2.判断是否绑定一个active

<div :class="{'active' : isActive == 1}">2</div>
<div :class="{'active' : isActive == num}">2</div>

3. 判断绑定多个

<div :class="{ 'active': isActive,'active1':isActive }">3</div>

4. 把需要绑定的类名储存到data中

<div :class="classObject">3</div>
<div :class="[isActive,isUser]">3</div>

5.三元判断

    注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染

<div :class="[ isActive ? 'active' : '']">4</div>
<div :class="[ isActive==1 ? 'active' : '']">4</div>

6.动态静态结合

<div :class="[{ 'active': isActive }, 'user']">5</div>

# 完整代码

<template>
  <div class="a">
    <!-- 1.判断是否绑定一个类名 -->
    <div :class="{ 'active': isActive }">1</div>

    <!-- 2.判断是否绑定一个active -->
    <div :class="{'active' : isActive == -2}">2</div>
    <div :class="{'active' : isActive == item}">2</div>

    <!-- 3. 判断绑定多个 -->
    <div :class="{ 'active': isActive,'user':isActive }">3</div>
      <!--4. 把需要绑定的类名储存到data中 -->
    <div :class="classObject">3</div>
    <div :class="[isActive,isUser]">3</div>

    <!-- 4.三元判断 -->
    <!-- 注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染 -->
    <div :class="[ isActive ? 'active' : '']">4</div>
    <div :class="[ isActive==1 ? 'active' : '']">4</div>

    <!-- 5.动态静态结合 -->
    <div :class="[{ 'active': isActive }, 'user']">5</div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true, 
      classObject:{ active: true, user:false },
      isActive:'active',
      isUser:'user'
    };
  },
};
</script>

<style scoped>
.a > div {
  float: left;
  width: 200px;
  height: 200px;
border: 1px solid #000;
}
.active {
  float: left;
  margin: 10px;
  width: 200px;
  height: 200px;
  background-color: red;
}
.user {
  float: left;
  margin: 10px;
  width: 200px;
  height: 200px;
  background-color: blueviolet;
}
</style>

---

二、动态绑定style写法

注意:

• 凡是有-的style属性名都要变成驼峰式，比如background-color要变成backgroundColor
• 除了绑定值，其他的属性名的值要用引号括起来
  • 比如 backgroundColor: "#000f" 而不是 backgroundColor:#000

1.对象绑定

<div :style="{ color: isActive, fontSize: num + 'px' }">1</div>

2.数组绑定

<div :style="[Styles1, Styles2]">2</div>
<div :style="[{ Styles1:index==1 },{ Styles2: index==1 }]">2</div>

3. 三元运算符

<div :style="{ color: index == 1 ? conFontColor : '#000' }">3</div>
<div :style=" isActive === styleObject.color ? 'color:red': 'color:aqua'" >3</div>
<div :style="[{ float: index == 1 ? 'left' : 'right' },{float: index == 1 ? 'height:64px' : 'height:32px' }]">3</div>

4.绑定data对象

<div :style="styleObject">4</div>

5. 动态静态结合

<div :style="[{ color: index == 1 ? conFontColor : '#000' },{ fontSize: '18px' }]">5</div>

# 完整代码

<template>
  <div>
    <!-- 1.对象绑定  -->
    <div :style="{ color: isActive, fontSize: num + 'px' }">1</div>
    <div :style="{ color: index == 1 ? conFontColor : '#000' }">1</div>

    <!-- 2.数组绑定  -->
    <div :style="[Styles1, Styles2]">2</div>
    <div :style="[{ Styles1:index==1 },{ Styles2: index==1 }]">2</div>

    <!-- 3. 三元运算符  -->
    <div :style="{ color: index == 1 ? conFontColor : '#000' }">3</div>
    <div :style=" isActive === styleObject.color ? 'color:red': 'color:aqua'" >3</div>
    <div :style="[{ float: index == 1 ? 'left' : 'right' },{float: index == 1 ? 'height:64px' : 'height:32px' }]">3</div>

    <!-- 4.绑定data对象  -->
    <div :style="styleObject"></div>

    <!-- 5. 动态静态结合 -->
     <div :style="[{ color: index == 1 ? conFontColor : '#000' },{ fontSize: '18px' }]">5</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index:1,
      isActive :'red',
      num:18,
      conFontColor:'#fff',
      styleObject: {
        color: "red",
        fontSize: "14px",
      },
      Styles1:'color: "red"',
      Styles2:'fontSize: "14px"'
    };
  },
};
</script>

<style scoped>
div{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>