如何做小程序直播_在VUE style中使用data中的变量的

日期:2021-01-05 类型:行业动态 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

在VUE style中使用data中的变量的方法       这篇文章主要介绍了在VUE style中使用data中的变量的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近项目中的公共组件,在复用的时候,针对不同的场景,需要不断变更CSS里样式的值,而且已经有了全局的公共组件样式了

如果用vue传统的动态绑定class和style的方式去修改样式(文末会提到),需要额外写很多变量和模块class,那如果我的样式的值,可以从父组件,传到子组件,子组件根据传入值去渲染对应样式的值,其实就是要再style中使用data和pro凡科抠图中的变量,这要怎么做呢?

其实很简单,只需要三步,大家来看:

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

 div v-bind:class="{ 'active': isActive, 'text-danger': hasError }" /div 

js

data: {
 isActive: false,
 hasError: true

数组语法

html

 div v-bind:class="\[isActive activeClass : '', errorClass\]" /div 

js

data: {
 isActive: false,
 hasError: true,
 activeClass: 'active',
 errorClass: 'text-danger'
}

只需要动态改变isActive和hasError的值,就可以实现div的绑定不同的class和去掉绑定

2、vue中可以通过对象语法和数组语法来修改style

对象语法

html

 div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" /div 

js

data: {
 activeColor: 'red',
 fontSize: 30

数组语法

html

 div v-bind: /div 

js

data: {
 styleColor: {
 color: 'red'
 styleSize:{
 fontSize:'23px'

只要改变data中的变量styleColor和styleSize,就可以动态修改div的style了。

到此这篇关于在VUE style中使用data中的变量的方法的文章就介绍到这了,更多相关VUE style使用data变量内容请搜索凡科以前的文章或继续浏览下面的