获取DOM元素<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><div id="app"><!-- <App></App> --></div><script type="text/javascript" src="../js/vue.min.js"></script><script type="text/javascript">var subComponent = {template: `<div></div> `};Vue.component(‘subCom‘, subComponent);var App = {data: function() {return {}},template: `<div class=‘app...
这篇文章主要介绍了vue获取dom元素注意事项及vue获取dom元素的内容,需要的朋友可以参考下mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this.$refs.bodyFont.offsetHeight);}}vue想要获取dom元素的高，一般情况下我们都可以想到写在mounted函数里，即dom加载完再获取，但是结果并不如我们所想，又想到用一个this.$nextTick(()=>{//函数
})来获取，发现根本没用啊/。。所以好的办...
下面我就为大家分享一篇基于vue1和vue2获取dom元素的方法，具有很好的参考价值，希望对大家有所帮助。vue1.*版本中在标签中加上el=dom，然后在代码中this.$els.dom这样就拿到了页面元素例如：<p class=box v-el: myBox>你好</p>让你好的颜色显示为红色：this.$els.my-box.style.color = redvue2.*版本中在标签中加上ref=dom，然后在代码中this.$refs.dom这样就拿到了页面元素例如：<p class=box ref=myBox>你好</p>让你好的颜色显...
这次给大家带来vue1与vue2获取dom元素步骤详解，vue1与vue2获取dom元素的注意事项有哪些，下面就是实战案例，一起来看一下。vue1.*版本中在标签中加上el=dom，然后在代码中this.$els.dom这样就拿到了页面元素例如：<p class=box v-el: myBox>你好</p>让你好的颜色显示为红色：this.$els.my-box.style.color = redvue2.*版本中在标签中加上ref=dom，然后在代码中this.$refs.dom这样就拿到了页面元素例如：<p class=box ref=myBox>你...
本文主要为大家带来一篇vue获取DOM元素并设置属性的两种实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。这里我想到了2个方法：方法一：直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式方法二：使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素注意：在获取相应元素之前，必须在mount钩子进行挂载，否...
这里我想到了2个方法：方法一：直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式方法二：使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素注意：在获取相应元素之前，必须在mount钩子进行挂载，否则获取到的值为空， 如果是给子组件加id并修改自定义属性，则直接会加载改子组件对应的外层p上，并不会改变该子组件原本的自定义属性的值 如果给子组件加ref...
在开发中总是忘记，特意在此记录
关键字： $event
<div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div>
updateBed: function(index, e) {
var selectedBedDom = $(e.srcElement)//dom元素
}PS：下面看下v-on:click获取当前事件对象元素
dom元素这样写:
<i @click="iconToogle($event)" class="iconfont icon-xuanzhong1"></i>vue实例中的methods的写法:
function (event){ c...
mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this.$refs.bodyFont.offsetHeight);}}vue想要获取dom元素的高，一般情况下我们都可以想到写在mounted函数里，即dom加载完再获取，但是结果并不如我们所想，又想到用一个
this.$nextTick(()=>{//函数
})来获取，发现根本没用啊/。。
所以好的办法就是用一个setTimeout定时器，时间可以设为0，但是有时候生效，有时候不生效，还是加...
这里我想到了2个方法：
方法一：
直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式
方法二：
使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素
注意：在获取相应元素之前，必须在mount钩子进行挂载，否则获取到的值为空，
如果是给子组件加id并修改自定义属性，则直接会加载改子组件对应的外层div上，并不会改变该子组件原本的自定义属性的值
如果给子组件加ref,然后...
在vue中可以通过给标签加ref属性，就可以在js中利用ref去引用它，从而操作该dom元素，以下是个例子，可以当做参考
<template> <div> <div id="box" ref="mybox"> DEMO </div> </div>
</template> <script>
export default { data () { return { } }, mounted () { this.init(); }, methods:{ init() { const self = this; this.$refs.mybox.style.color = red; setTimeout(() => { self.$refs.mybox.style.color = blue; },2000)...
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 style is not definde的错误，这时候可以在 mounted 里用 $refs 来获取样式，并进行更改：<template><div style="display: block;" ref="abc"><!-- ... --></div>
</template>
<script>export default {mounted () {console.log(this.$refs.abc.style.cssText)}}
</script>结果是 display: block;
如果我们给一个div设定全屏背景图，就需要获取屏幕高度进行...
vue.js 是数据绑定的框架，大部分情况下我们都不需要直接操作 DOM Element，但在某些时候，我们还是有获取DOM Element的需求的； 在 vue.js 中，获取某个DOM Element常用的方法是将这个元素改成一个组件 (component)，然后通过 this.$el 去获取，但是在一些很小的项目里，在一些没有使用 webpack 等构建工具的项目中，创建一个组件并不是那么值得，所以 vue 提供了另一种操作DOM元素的方式，就是自定义指令 (directive) ； 自定义指...
