Vue动态样式你不会吗

Vue动态样式

背景：在我们的前端界面中，很多的地方的样式都是不确定的状态，要根据其他内容的变化而变化样式的。本文总结一下自己用到的动态样式方法。

一、动态绑定 :style

👉1.使用对象方式

通过v-bind:style来绑定style样式，“”引号里面使用对象的方式，为key，value形式，key值为css属性名，注意的是例如font-size，在key中要写成fontSize驼峰命名规则。value就是我们绑定的值，可以动态去改变。

<h1 :style="{ color: Color ,fontSize:size+'px'}">浪漫主义码农</h1>

例子：

代码：

<template>
  <div>
    <h1 :style="{ color: Color ,fontSize:size+'px'}">浪漫主义码农</h1>
    <div class="btn">
      <el-button type="primary" @click="changeColor">点击切换颜色</el-button>
      <el-button type="primary" @click="Change_size">字体变大</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Color:'blue',
      size:14
    };
  },
  methods:{
      changeColor(){
          this.Color='red'
      },
      Change_size(){
          this.size++
      }
  }
};
</script>

也可以将所有的属性全部写在一个对象里面，最后在:style绑定这个对象就行，简化页面代码

例如：

<template>
  <div>
    <h1 :style="myStyle">浪漫主义码农</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myStyle: {
        fontSize: 40 + "px",
        color: "red",
      },
    };
  },
};
</script>

👉2.使用三目表达式

通过布尔表达式来判断value值应该为什么，ifcolor为表达式，并使用圆括号将三目表达式包起来

<h1 :style="{ color:(ifcolor?'red':'blue')">浪漫主义码农</h1>

👉3.使用数组方式

:style="[{样式对象1}，{样式对象2},…]"

可以将多组样式对象应用到同一个元素上，但是如果有css属性相同，则后面的样式会覆盖前面的。

例子：

<template>
  <div>
    <h1 :style="[styles1,styles2]">浪漫主义码农</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      styles1: {
        backgroundColor: "red",
        "width": "300px",
      },
      styles2: {
        color: "#fff",
        height: "300px",
      }
    };
  },
};
</script>

二、动态绑定 :class

使用v-bind:class

👉1. 使用对象方法

:class="{类名1：布尔值1，类名2：布尔值2}" 当布尔值为true整个类生效，否则就不生效，class和:class并不冲突，因为class可以是很多个。写法也是相对的自由

例子：

<template>
  <div>
    <p class="class1" :class="{class2:ifcolor,class3:true}">浪漫主义码农</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
        ifcolor:false,
    }
  },
};
</script>

<style>
div{
  margin-left: 100px;
}

.class1{
    background: #E6A23C;
    width: 100px;
    height: 100px;
}

.class2{
    color: red;
}
.class3{
    font-size: 30px;
    font-weight: 1000;
}
</style>

👉2. 使用三目表达式

我们使用三目运算符能够更加的灵活的，并简化对象方法的写法，，对象的写法我们需要一个变量去控制每一个类，使用三目运算符可以简化一点，我最常使用的是种形式。

:class="布尔值 ? '类1' : '类2'"

例子：

<template>
  <div>
    <h1 :class="ifcolor ? 'Red' : 'Pink'">“浪漫至死不渝，温柔绝对屈服”</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ifcolor: false,
    };
  },
  mounted() {
    setInterval(() => {
      this.ifcolor = !this.ifcolor;
    }, 1000);
  },
};
</script>

<style>
div {
  margin-left: 200px;
  margin-top: 200px;
}
.Red {
  font-size: 20px;
  color: red;
  animation: big 1s;
}
.Pink {
  font-size: 20px;
  color: pink;
  animation: small 1s;
}
@keyframes big {
  0% {
    font-size: 20px;
  }
  100%{
      font-size: 30px;
  }
}
@keyframes small {
  0% {
    font-size: 30px;
  }
  100%{
      font-size: 20px;
  }
}
</style>

👉2. 使用数组方法

和上面的style一样的使用

:class="[class1, class2]"

例子：

代码：

<template>
  <div>
      <p :class="[classA,classB,classC]">今天毕业拍毕业照了</p>
  </div>
</template>

<script>
export default {
    data(){
        return{
            classA:'one',
            classB:'two three',
            classC:'five'
        }
    }
}
</script>

<style>
div{
    margin-left: 200px;
    margin-top: 200px;
}
.one{
    background: pink;
}
.two{
    font-size: 30px;
}
.three{
    color: red;
}
.five::after{
    content: ",青春再见";
}
</style>

写在最后

要是有误的地方，欢迎大佬们评论指出。

今天我们拍了毕业照。离别总是伤感的。我们和学校说再见，却不跟青春道别。

💌 我们从五湖四海来，到天南海北去。

💌 愿你以梦为马，永远随处可栖。

一个心怀浪漫宇宙，也珍惜人间日常的码农