vue获取dom元素注意事项
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.log(this.$refs.bodyFont.offsetHeight); } }
vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一个
this.$nextTick(()=>{ //函数 })
来获取,发现根本没用啊/。。
所以好的办法就是用一个setTimeout定时器,时间可以设为0,但是有时候生效,有时候不生效,还是加一个小的时间值比较保险,这样就可以保证获取到的一定是dom加载后的了,该原理适用于vue中很多传值的问题,刚开始获取不到传过来的值,用一个setTimeout就可。
ps:VUE获取DOM元素内容
通过ref来获取dom元素
在vue官网上对ref的解释
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例
当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组
比如我现在要实现的效果是点击用v-for生成的li ,获取到该元素的值
首先要获取当前点击的li元素,我们要做的是
1.给dom添加点击事件和ref属性
<li class="sidebar-list" v-for="(item, index) in meunList" @click="setPageMenu(index)" ref="menuItem"> <router-link class="sidebar-a" :to="{ path: item.listLink }" >{{item.listTitle}}</router-link> </li>
2.然后在点击事件方法中使用ref
setPageMenu(index) { //这个是获取当前menuItem值,用index来区分当前元素是v-for 产生的数组中的第几个数 let getMenuText = this.$refs.menuItem[index].innerText; }
总结
以上所述是小编给大家介绍的vue获取dom元素注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
您可能感兴趣的文章:
- 在vue中获取dom元素内容的方法
- 详解在Vue中通过自定义指令获取dom元素
- vue.js 获取当前自定义属性值
- vue.js获得当前元素的文字信息方法
相关推荐
-
在vue中获取dom元素内容的方法
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template> <div> <div id="box" ref="mybox"> DEMO </div> </div> </template> <script> export default { data () { return { } }, mounted
-
vue.js获得当前元素的文字信息方法
1.获得当前点击的内容 <li @click="problem1"> 1. <span class="blue">关于公众号使用问题</span> <img src="../img/right.png" alt=""/> </li> 当我点击这个li标签的时候,我想要获得span里面的文字,可以使用这个方法: problem1: function(e){ consol
-
vue.js 获取当前自定义属性值
假设有一个标签h5, 我们给它添加了一个自定义属性值,(item.id是从动态添加的) 点击h5 标签,如何才能获取当前对应的自定义属性值呢? 想当然的我最开始这样写: <h5 class="left t-title" @click='getDataId' :data-id="item.id"></h5> <script> methods: { getDataId() { console.log(this.data-id); }
-
详解在Vue中通过自定义指令获取dom元素
vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定
-
vue获取dom元素注意事项
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.log(this.$refs.bodyFont.offsetHeight); } } vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一个 this.$nextTick(()=>{ //函数 }) 来获取,发现根本没用啊
-
vue获取DOM元素并设置属性的两种实现方法
这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素 注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值 如果给子组件
-
Vue获取DOM元素并修改属性的方法
Vue获取DOM元素 Vue获取DOM元素有两种方法 直接给相应的元素加id,然后再使用document.getElementById("id");获取 使用ref,给相应的元素加ref=“name”然后再使用this.$refs.name获取到该元素 Vue获取到元素并修改属性或者样式 使用上述的第二种方法,获取到元素,然后使用this.$refs.元素元素的ref对应的name.style.属性名(样式或者其他的属性名) = “你要设置的值”或者元素的ref对应的name.属性名(
-
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template> <div style="display: block;" ref="abc"> <!-- ... --> </div> </template> <script>
-
如何在Vue中获取DOM元素的实际宽高
目录 前言 一.获取元素 二.获取元素宽高 补充:vue项目获取dom元素宽高总是不准确 总结 前言 最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素 在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素. 为了保险起见,所有的 DOM 操作建议都放在 $nextTick() 方法中. <template> <div class="box
-
解决vue项目获取dom元素宽高总是不准确问题
dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确: this.$refs.editor[0].offsetHeight; 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕: 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识:vue 获取 指定元素的高度宽度等(
-
vue 3.0 使用ref获取dom元素的示例
前言 附上vue3.0文档:Vue3中文文档 - vuejs Vue 2.x获取DOM <div ref="myRef"></div> this.$refs.myRef Vue 3.0获取单个DOM <template> <div ref="myRef">获取单个DOM元素</div> </template> <script> import { ref, onMounted } fr
-
基于vue1和vue2获取dom元素的方法
vue1.*版本中 在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素 例如:<div class='box' v-el: myBox>你好</div> 让你好的颜色显示为红色:this.$els.my-box.style.color = 'red' vue2.*版本中 在标签中加上ref='dom',然后在代码中this.$refs.dom这样就拿到了页面元素 例如:<div class='box' ref='myBox'>你好
-
vue操作dom元素的3种方法示例
1.原生js操作dom const dom = getElementById('box') 2.vue官方方法:ref vue中的ref是把当前dom元素 " 抽离出来 " ,只要通过 this.$refs就可以获取到 < div class="set" ref="up"> .set是我们要操作的dom对象,它的ref是 up @click="Alert" 给父元素一个点击事件, 接下来我们来编写这个方法 meth
-
vue3使用自定义hooks获取dom元素的问题说明
目录 使用自定义hooks获取dom元素问题 分享下楼主自己的观点 vue获取/操作组件的dom元素 下面是我的代码内容(非全部内容) 最后总结 使用自定义hooks获取dom元素问题 在自定义hooks的onMounted事件里面 获取ref元素,组件调用hooks的时候必须要传递响应式对象. 分享下楼主自己的观点 代码如下 <script> // demo.vue import { defineComponent, ref } from 'vue' import useBars from
随机推荐
- iOS实现封装一个获取通讯录的工具类详解
- 个人站长哪些类题材网站不能做
- 用DOS命令快速把整个系统情况摸个清
- 批处理实现网吧存档
- Oracle date 和 timestamp 区别详解
- 基于php socket(fsockopen)的应用实例分析
- MySQL 日期时间函数常用总结
- PHP中simplexml_load_string函数使用说明
- PHP提取字符串中的图片地址[正则表达式]
- Docker如何使用OpenvSwitch网桥
- jQuery实现强制cookie过期方法汇总
- javascript相等运算符与等同运算符详细介绍
- Ruby常用文件操作代码实例
- js实现城市级联菜单的2种方法
- Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
- Serv-U 无法连接到服务器127.0.0.1,端口43958 之解决办法
- Android编程实现获取新浪天气预报数据的方法
- c# DevExpress gridcontrol日期行的显示格式设置
- Visual Studio 2010配置OpenCV的方法
- 利用Hyperic调用Python实现进程守护