首页 > 其他分享 >【Vue】vue获取dom元素

【Vue】vue获取dom元素

时间:2023-07-20 14:56:20浏览次数:30  
标签:vue dom refs 获取 Vue 组件 ref

vue中准确的拿到那个元素用ref,ref是绑定给子组件 <普通元素也可以绑定ref>

ref如果是绑定在组件中的,那么通过 this.$refs.ref 的name获取到的是一个组件对象
ref如果是绑定在普通的元素中的,那么通过 this.$refs.ref 的name获取到的是一个元素对象

 

html

<div ref='a'> aaaaa </div>
<cpn ref='b'> bbbbb </cpn>

 

js

 console.log(this.$refs.aa);//获取dom
 console.log(this.$refs.dd);//组件对象,this.$refs=>对象类型,默认是个空的对象,要在组件上加属性ref,如ref="dd"   -----------常用

 

 

 

标签:vue,dom,refs,获取,Vue,组件,ref
From: https://www.cnblogs.com/phoenixy/p/17568406.html

相关文章

  • vue-element-admin改为从后台拿动态指令权限(按钮)- 下
    改为从后台拿动态指令权限,大概如下步骤:1、后台修改接口返回指令权限数据2、修改src/store/modules/permission.js修改generateRoutes,添加保存 指令权限3、修改验证指令去权限方法(checkPermission:src/utils/permission.js、v-permission:src/diective/permission/permi......
  • 关于vue3使用setup语法糖获取不到组件实例内部的变量
    //子组件<template><div>{{count}}</div><template<scriptsetup>import{ref}from'vue'constcount=ref(0)</script>//父组件<template><div><Childref="child"/>......
  • vue生成二维码以及获取当前的地址url
    <template> <divclass="hello">  <h2>二维码</h2>  <canvasref="qrCodeCanvas"></canvas><div>{{url}}</div> </div></template><script>importQRCodefrom'qrco......
  • Vuex的例接以及核心属性
    Vuex是vue用户状态管理的,核心就是store(仓库),它的5个核心属性分别是State、Getter、Mutation、Action、Module。state:管理存放数据,包括数组、对象、字符串,只能通过mutations和actions来修改getter:类型计算属性,...mapGetters([""])引用,返回值会根据它的依赖被缓存起来,只有依赖......
  • Vue利用element ui分栏,并将threejs插入到main
    目录1.在node.js官网下载2.在win+r中输入cmd打开管理员:命令提示符3.cmd命令下载安装淘宝镜像上的npm包4.cmd命令安装vuecli,并验证是否安装成功5.通过vueui命令以图形化界面创建和管理项目6.vue项目创建完成,在终端里安装elementui7.在main.js文件中引入element8.利用element进行......
  • html5页面中使用vue组件DEMO
    资源下载npmhttp-vue-loader:https://www.npmjs.com/package/http-vue-loader http-vue-loader.js下载 普通html5使用vue组件1、页面引入相关JS文件 2、创建components组件 3、主页面创建vue实例 引入相关组件名 4、html中使用vue组件 ......
  • 58.请使用vue3+vite+typescript+element-plus+setup语法糖,使用xlsx和file-saver实现保
    1<template>2<div>3<el-table4:data="mergedTableData"5border6stripe7>8<!--表头-->9<el-table-column10prop="date"11label="......
  • vue 学习 day4
    VUE相关的指令: v-html插入原始的html constraw_html="<h1>Helloworld</h1><pv-html="raw_html"></p><!--标签不能再有孩子节点,有的话会报错--> v-bind缩写是":"绑定属性值democonstattri_01="id01";<divv-bi......
  • python flask 使用 vue
    PythonFlask使用Vue引言PythonFlask是一款轻量级的Web开发框架,而Vue是一款流行的JavaScript框架,用于构建交互式的用户界面。结合PythonFlask和Vue可以帮助我们开发出功能强大的Web应用程序。本文将介绍如何使用PythonFlask和Vue来构建Web应用程序,并提供......
  • 前端Vue自定义开屏启动广告组件,点击广告图跳转广告详情
    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率......