在VUE style中使用data中的变量的办法详解
比来项目中的公共组件,在复用的时候,针对不一样的场景,需要不竭变动CSS里样式的值,并且已经有了全局的公共组件样式了
假如用vue传统的动态绑定class和style的方式去修改样式(文末会提到),需要额外写许多变量和模块class,那假如我的样式的值,可以从父组件,传到子组件,子组件按照传入值去渲染对应样式的值,其实就是要再style中使用data和props中的变量,这要如何做呢?
相关学习引荐:javascript视频教程
其实很简便,只需要三步,大家来看:
1、HTML构造
<Upload ref="upload" :show-upload-list="false" :before-upload="handleBeforeUpload" :disabled="disabled" :max-size="maxSize" action >
2、作用区域范畴内设定“CSS变量”
<style lang="less" scoped> .info-img-wrap { --textAlignPosition: center; /deep/ .ivu-upload { text-align: var(--textAlignPosition); } } <style/>
3、在JS中通过setProperty()办法修改“--textAlignPosition”的值,从而间接改动对应子元素的(text-align)文本对齐方式
mounted() { this.$nextTick(function () { this.$refs.upload.$el.style.setProperty( '--textAlignPosition', this.textAlign ); }); }
这要就完成了。
下面再复习一下vue中修改样式还有别的两种办法,1是动态修改class,2是动态修改style
1、vue中可以通过对象语法和数组语法来修改class
对象语法
html
<p v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></p>
js
data: { isActive: false, hasError: true }
数组语法
html
<p v-bind:class="\[isActive ? activeClass : '', errorClass\]"></p>
js
data: { isActive: false, hasError: true, activeClass: 'active', errorClass: 'text-danger' }
只需要动态改动isActive和hasError的值,就可以实现p的绑定不一样的class和去除绑定
2、vue中可以通过对象语法和数组语法来修改style
对象语法
html
<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></p>
js
data: { activeColor: 'red', fontSize: 30 }
数组语法
html
<p v-bind:style="\[styleColor, styleSize\]"></p>
js
data: { styleColor: { color: 'red' }, styleSize:{ fontSize:'23px' } }
只要改动data中的变量styleColor和styleSize,就可以动态修改p的style了。
相关学习引荐:编程视频
以上就是在VUE style中使用data中的变量的办法详解的具体内容,更多请关注百分百源码网其它相关文章!