Vue dynamic styles

This is the 20th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Background: In many areas of our front-end interface, styles are in an indeterminate state, changing as other content changes. This article summarizes the dynamic style approach I use.

First, dynamic binding :style

👉1. Use object mode

Use v-bind:style to bind the style style. Use key and value in the “” quotes. The key value is the CSS property name. Value is the value that we bind and can change dynamically.

<h1 :style="{color: color,fontSize:size+'px'}">

Example:

Code:

<template>
  <div>
    <h1 :style="{ color: Color ,fontSize:size+'px'}">Romantic code farmers</h1>
    <div class="btn">
      <el-button type="primary" @click="changeColor">I'm gonna switch colors</el-button>
      <el-button type="primary" @click="Change_size">Font bigger</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Color:'blue'.size:14
    };
  },
  methods: {changeColor(){
          this.Color='red'
      },
      Change_size(){
          this.size++
      }
  }
};
</script>
Copy the code

You can also write all the attributes in a single object, and finally bind the object in :style to simplify the page code

Such as:

<template>
  <div>
    <h1 :style="myStyle">Romantic code farmers</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myStyle: {
        fontSize: 40 + "px".color: "red",}}; }};</script>
Copy the code

👉2. Use ternary expressions

What should the value of a Boolean expression be

<h1 :style="{ color:(ifcolor? "> </h1>

👉3. Use arrays

:style=”[{style object 1}, {style object 2},…] “

Multiple sets of style objects can be applied to the same element, but if any CSS property is the same, the later style overrides the previous one.

Example:

<template>
  <div>
    <h1 :style="[styles1,styles2]">Romantic code farmers</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      styles1: {
        backgroundColor: "red"."width": "300px",},styles2: {
        color: "#fff".height: "300px",}}; }};</script>
Copy the code

Dynamic binding :class

Use the v – bind: class

👉1. Use object methods

:class=”{class name 1: Boolean 1, class name 2: Boolean 2}” The entire class is valid if the Boolean value is true, otherwise it is invalid. The writing is also relatively free

Example:

<template>
  <div>
    <p class="class1" :class="{class2:ifcolor,class3:true}">Romantic code farmers</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>
Copy the code

👉2. Use ternary expressions

We use the ternary operator to be more flexible and simplify the writing of object methods. The writing of objects requires a variable to control each class. Using the ternary operator simplifies things a little bit.

:class=" Boolean? 'Class 1' :' Class 2'"

Example:

<template>
  <div>
    <h1 :class="ifcolor ? 'Red' : 'Pink'">"Romantic till death do us part, tender absolute submission."</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>
Copy the code

👉2. Use the array method

Use the same style as above

:class="[class1, class2]"

Example:

Code:

<template>
  <div>
      <p :class="[classA,classB,classC]">Today is the graduation photo shoot</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: "Goodbye youth.";
}
</style>
Copy the code

Write in the last

If there is something wrong, you are welcome to comment on it.

Today we took our graduation photos. Parting is always sad. We say goodbye to school, but not to youth.

💌 We come from all over the world to the south China Sea.

💌 May you take dreams as horses and live anywhere forever.

A romantic universe, but also cherish the world’s daily code farmers