小编给大家分享一下在VUE style中使用data中的变量的案例分析,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
成都创新互联服务项目包括鄄城网站建设、鄄城网站制作、鄄城网页制作以及鄄城网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,鄄城网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到鄄城省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!最近项目中的公共组件,在复用的时候,针对不同的场景,需要不断变更CSS里样式的值,而且已经有了全局的公共组件样式了
如果用vue传统的动态绑定class和style的方式去修改样式(文末会提到),需要额外写很多变量和模块class,那如果我的样式的值,可以从父组件,传到子组件,子组件根据传入值去渲染对应样式的值,其实就是要再style中使用data和props中的变量,这要怎么做呢?
其实很简单,只需要三步,大家来看:
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中的变量的案例分析有了一定的了解,想了解更多相关知识,欢迎关注创新互联-成都网站建设公司行业资讯频道,感谢各位的阅读!
当前名称:在VUEstyle中使用data中的变量的案例分析-创新互联
文章URL:https://www.cdcxhl.com/article26/ceepjg.html
成都网站建设公司_创新互联,为您提供网站维护、面包屑导航、静态网站、用户体验、企业建站、云服务器
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联