在vue中获取dom元素内容的方法

在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)
  }
 } 

}
</script> 

<style scoped>
 #box {
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 20px;
  text-align: center;
  border: 1px solid black;
  margin: 50px;
  color: yellow;
 }
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解在Vue中通过自定义指令获取dom元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定

  • vue获取DOM元素并设置属性的两种实现方法

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素 注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值 如果给子组件

  • Vue获取DOM元素样式和样式更改示例

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template> <div style="display: block;" ref="abc"> <!-- ... --> </div> </template> <script>

  • 在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中获取DOM元素的实际宽高

    如何在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 获取 指定元素的高度宽度等(

  • uniapp中获取dom元素的方法及更改dom元素颜色踩坑记录

    目录 前言 使用uni.createSelectorQuery() 附:ni-app获取DOM元素信息及跳到指定位置 总结 前言 最近写uniapp,遇到一个需要获取到页面中dom元素,我第一反应是使用this.$ refs进行获取,于是我开心的使用this.$refs写了很多代码,使用h5调试的过程中没有发现任何问题,但后来真机调试的时候发现在app端无效,于是我查看文档发现了: 非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:view.text 使用uni.createSele

  • JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

  • vue 中Virtual Dom被创建的方法

    本文将通过解读render函数的源码,来分析vue中的vNode是如何创建的.在vue2.x的版本中,无论是直接书写render函数,还是使用template或el属性,或是使用.vue单文件的形式,最终都需要编译成render函数进行vnode的创建,最终再渲染成真实的DOM. 如果对vue源码的目录还不是很了解,推荐先阅读下 深入vue -- 源码目录和编译过程. 01  render函数 render方法定义在文件 src/core/instance/render.js 中 Vue.pro

  • jQuery中获取Radio元素值的方法

    又发现自己写的JavaScript代码在FireFox下运行出错,原因很郁闷,在获取一个Radio元素的值的时候只得到了 undefind.谷歌了一下,大多跟我用的方法是一样的 复制代码 代码如下: var value = $("input[name='radio1'][type='radio'][checked]").val(); 这句在IE.Safari(3.2)下测试通过,但是在FireFox.Chrome下却得不到选中的值.仔细再看手册,发现"表单对象属性"

  • 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这样就拿到了页面元素 例如:<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 3.0 使用ref获取dom元素的示例

    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

随机推荐