When reusing the common components in recent projects, for different scenarios, they need to constantly change the style values in CSS, and there is already a global public component style.
If you use the traditional method of dynamically binding class and style to modify the style (mentioned at the end of the article), you need to write a lot of variables and module classes, then if the value of my style can be passed from the parent component to the child component, and the child component will render the corresponding style values according to the passed value, in fact, you need to use the variables in data and props in style. How to do this?
It's actually very simple, only three steps are needed, 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 variable" within the range of the action area
<style lang="less" scoped>
.info-img-wrap {
--textAlignPosition: center;
/deep/ .ivu-upload {
text-align: var(--textAlignPosition);
}
}
<style/>
3. Modify the value of "--textAlignPosition" in JS through the setProperty() method, thereby indirectly changing the text alignment of the corresponding child elements (text-align)
mounted() {
this.$nextTick(function () {
this.$.$(
'--textAlignPosition',
);
});
}
This is done.
Next, review the other two methods of modifying styles in vue. 1 is to dynamically modify class, and 2 is to dynamically modify style
1. In vue, class can be modified through object syntax and array syntax.
Object Syntax
html
<div v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></div>
js
data: {
isActive: false,
hasError: true
}
Array Syntax
html
<div v-bind:class="\[isActive ? activeClass : '', errorClass\]"></div>
js
data: {
isActive: false,
hasError: true,
activeClass: 'active',
errorClass: 'text-danger'
}
Just dynamically change the values of isActive and hasError, and you can implement the binding of divs to different classes and remove bindings.
2. In vue, you can modify the style through object syntax and array syntax.
Object Syntax
html
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
js
data: {
activeColor: 'red',
fontSize: 30
}
Array Syntax
html
<div v-bind:style="\[styleColor, styleSize\]"></div>
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 the div.
This is the article about using variables in data in VUE style. For more related content on VUE style using data variables, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!