Detailed explanation of how to use variables in data in VUE style

When reusing public components in recent projects, the value of the style in CSS needs to be constantly changed for different scenarios, and there is already a global public component style

If you use Vue’s traditional dynamic binding method of class and style to modify the style (mentioned at the end of the article), you need to write a lot of additional variables and module classes. Then if the value of my style can be obtained from the parent component, Passed to the subcomponent, the subcomponent renders the value of the corresponding style based on the passed in value. In fact, it means using the variables in data and props in the style. How to do this?

Related learning recommendations: javascript video tutorial

It’s actually very simple, it only takes three steps, let’s take a look:

1. HTML structure

<Upload

   ref="upload"

   :show-upload-list="false"

   :before-upload="handleBeforeUpload"

   :disabled="disabled"

   :max-size="maxSize"

   action
>

2. Set "CSS variables" within the scope of the scope

<style lang="less" scoped>
.info-img-wrap {

 --textAlignPosition: center;

 /deep/ .ivu-upload {

  text-align: var(--textAlignPosition);

 }

}
<style/>

3. Pass setProperty() in JS The method modifies the value of "--textAlignPosition", thereby indirectly changing the (text-align) text alignment of the corresponding child element

mounted() {

   this.$nextTick(function () {

    this.$refs.upload.$el.style.setProperty(

     '--textAlignPosition',

     this.textAlign

    );

   });

}

This is almost complete.

Let’s review that there are two other ways to modify the style in Vue, 1 is to dynamically modify the class, 2 is to dynamically modify the style

1. In Vue, you can use object syntax and Array syntax to modify class

Object syntax

html

<p v-bind:class="{ &#39;active&#39;: isActive, &#39;text-danger&#39;: hasError }"></p>

js

data: {

 isActive: false,

 hasError: true

}

Array syntax

html

<p v-bind:class="\[isActive ? activeClass : &#39;&#39;, errorClass\]"></p>

js

data: {

 isActive: false,

 hasError: true,

 activeClass: 'active',

 errorClass: 'text-danger'
}

You only need to dynamically change the values ​​​​of isActive and hasError, you can bind different classes and remove the binding of p

2, In vue, style can be modified through object syntax and array syntax

Object syntax

html

<p v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></p>

js

data: {

 activeColor: 'red',

 fontSize: 30

}

Array syntax

html

<p v-bind:style="\[styleColor, styleSize\]"></p>

js

data: {

 styleColor: {

   color: 'red'

  },

 styleSize:{

   fontSize:'23px'

 }

}

As long as you change the variables styleColor and styleSize in data, you can dynamically modify the style of p.

Related learning recommendations: Programming video

The above is the detailed content of Detailed explanation of how to use variables in data in VUE style. For more information, please follow other related articles on the PHP Chinese website!