在VUE style中使用data中的变量的方法


Posted in Javascript onJune 19, 2020

最近项目中的公共组件,在复用的时候,针对不同的场景,需要不断变更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

<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:style="\[styleColor, styleSize\]"></div>

js

data: {

 styleColor: {

   color: 'red'

  },

 styleSize:{

   fontSize:'23px'

 }

}

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

到此这篇关于在VUE style中使用data中的变量的方法的文章就介绍到这了,更多相关VUE style使用data变量内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
js刷新框架子页面的七种方法代码
Nov 20 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
jquery实现用户打分评分特效
May 28 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
JavaScript中跨域问题的深入理解
Mar 04 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 #Javascript
原生JS实现微信通讯录
Jun 18 #Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 #Javascript
js实现ajax的用户简单登入功能
Jun 18 #Javascript
JS实现躲避粒子小游戏
Jun 18 #Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 #Javascript
vue实现购物车结算功能
Jun 18 #Javascript
You might like
实用函数8
2007/11/08 PHP
PHP Stream_*系列函数
2010/08/01 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
详解a++和++a的区别
2017/08/30 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
详解【python】str与json类型转换
2019/04/29 Python
python 自定义装饰器实例详解
2019/07/20 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
仓管员岗位职责范文
2013/11/08 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
爱护草坪标语
2014/06/24 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
教师理论学习心得体会
2016/01/21 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
DSP接收机前端设想
2022/04/05 无线电