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 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
微信小程序实现轮播图指示器
Jun 25 Javascript
微信小程序调用摄像头隐藏式拍照功能
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设计聊天室步步通
2006/10/09 PHP
php 正则匹配函数体
2009/08/25 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
php 强制下载文件实现代码
2013/10/28 PHP
php静态文件生成类实例分析
2015/01/03 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python 中 Meta Classes详解
2016/02/13 Python
Python正规则表达式学习指南
2016/08/02 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
python中return如何写
2020/06/18 Python
Python如何读写二进制数组数据
2020/08/01 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
食品行业求职人的自我评价
2014/01/19 职场文书
马智宇结婚主持词
2014/04/01 职场文书
书香家庭事迹材料
2014/05/09 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
优质服务标语口号
2015/12/26 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python