Vue动态样式你不会吗

Posted 2021-12-16 浪漫主义码农

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>

写在最后

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

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

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

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

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