Vue动态获取width的方法


Posted in Javascript onAugust 22, 2018

vue里想用Bootstrap的进度条,

<div class="progress">
 <div class="progress-bar progress-bar-warning" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
  style="width: 20%;">
 <span class="sr-only">20%</span>
 </div>
</div>

主要是把style="width: 20%;"变成动态获取的。

:style="'width:' + percent + '%'"

这样写就好了。

也可是这样:

用vue 获取动态元素的宽度。首页,要放在this.$nextTick里面,其实要使用$el挂载此元素,下面贴代码吧:

<el-input auto-complete="off" v-model="company.companyName" ref="companyStyle"></el-input>

先定义一个ref=companyStyle,我们来获取此元素的宽度,

newAddBtn(){
 let me = this;
 this.$nextTick(function () {
  me.inputStyWidth = me.$refs.companyStyle.$el.clientWidth + 'px';
 
 })

这样我们就获取到了这个元素的宽度了。

以上这篇Vue动态获取width的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
微信小程序调用摄像头隐藏式拍照功能
Aug 22 #Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 #Javascript
Vue之mixin全局的用法详解
Aug 22 #Javascript
React中使用UEditor百度富文本的方法
Aug 22 #Javascript
VUE 全局变量的几种实现方式
Aug 22 #Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 #Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 #Javascript
You might like
php escape URL编码
2008/12/10 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
python获取当前日期和时间的方法
2015/04/30 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
教学个人的自我评价分享
2014/02/16 职场文书
药剂专业自荐书
2014/06/20 职场文书
团代会闭幕词
2015/01/28 职场文书
皇城相府导游词
2015/02/06 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
js作用域及作用域链工作引擎
2022/07/07 Javascript