html元素data属性设置变量,在VUE style中运用data中的变量的要领详解_WEB前端开发...

近来项目中的大众组件，在复用的时刻，针对差别的场景，须要不停变动CSS里款式的值，而且已经有了全局的大众组件款式了

假如用vue传统的动态绑定class和style的体式格局去修正款式(文末会提到)，须要分外写许多变量和模块class，那假如我的款式的值，能够从父组件，传到子组件，子组件依据传入值去衬着对应款式的值，实在就是要再style中运用data和props中的变量，这要怎么做呢？

相干进修引荐：javascript视频教程

实在很简单，只须要三步，人人来看：

1、HTML构造

ref="upload"

:show-upload-list="false"

:before-upload="handleBeforeUpload"

:disabled="disabled"

:max-size="maxSize"

action

>

2、作用地区范围内设置“CSS变量”

.info-img-wrap {

--textAlignPosition: center;

/deep/ .ivu-upload {

text-align: var(--textAlignPosition);

}

}

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

js

data: {

isActive: false,

hasError: true

}

数组语法

html

js

data: {

isActive: false,

hasError: true,

activeClass: 'active',

errorClass: 'text-danger'

}

只须要动态转变isActive和hasError的值，就能够完成p的绑定差别的class和去掉绑定

2、vue中能够经由过程对象语法和数组语法来修正style

对象语法

html

js

data: {

activeColor: 'red',

fontSize: 30

}

数组语法

html

js

data: {

styleColor: {

color: 'red'

},

styleSize:{

fontSize:'23px'

}

}

只需转变data中的变量styleColor和styleSize，就能够动态修正p的style了。

相干进修引荐：编程视频

以上就是在VUE style中运用data中的变量的要领详解的细致内容，更多请关注ki4网别的相干文章！

收藏 | 0