在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 相关文章推荐
jQuery源码分析之Event事件分析
Jun 07 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 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
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php基本函数汇总
2015/07/09 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
javascript 实现map集合
2015/04/03 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python编程中的for循环语句学习教程
2015/10/14 Python
python3判断url链接是否为404的方法
2018/08/10 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
python中四舍五入的正确打开方式
2021/01/18 Python
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
经济系大学生求职信
2013/10/01 职场文书
总经理秘书工作职责
2013/12/26 职场文书
中学教师培训制度
2014/01/31 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
医院党建工作总结2015
2015/05/26 职场文书