传统的方法获取dom元素操作dom，通常是获取类名，id,属性等来获取到dom,但在vue中获取组件dom的话会有问题，请看下面代码：

控制台打印出来的结果如下，你会发现正常标签可以正常显示，但是组件就不行，它将你的组件转化成一个标签形式的了，显然这不是我们想要的效果

 

所以vue中给了我们更好的选择，通过ref 来获取dom元素：

这时我们控制台才可以打印出我们真正想要的数据，会发现组件里面的方法和属性都可以获取得到

vue操作dom元素的更多相关文章

  1. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

  2. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  3. 跨frame操作dom元素

    今天,一群友问到跨frame操作dom元素的问题.于是写了个demo,在此发表在博客里面,供其他同道中人参考! 创建child.html内容如下: <!DOCTYPE HTML PUBLIC & ...

  4. JQUERY选择和操作DOM元素（利用正则表达式的方法匹配字符串中的一部分）

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  5. JS/JQuery操作DOM元素笔记

    原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...

  6. 在vue中操作dom元素

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...

  7. vue如何获取并操作DOM元素

    原文地址 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加re ...

  8. Vue获取dom元素

     <li  @click='获取li标签'    :ref="center-li" id="center-li"      > =====我是li标 ...

  9. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

随机推荐

  1. 电压-电流转换（一）：4-20mA电流环

    在仪表电路中,直流信号通常用作物理测量值的模拟表示,例如温度.压力.流量.重量和运动.最常见的是,直流电流信号优先于直流电压信号使用,因为在从电源(测量设备)到负载(指示器.记录仪或控制器)的整个串联 ...

  2. 使用iframe内嵌PC网站实现高度自适应

    加个样式 <style> iframe { display: block; border: none; height: 90vh;/*设置高度百分比,一直调到只有一个滚动调为止*/ wid ...

  3. C++之面试题（4）

    题目描述 来源:牛客网 对于一个有序数组,我们通常采用二分查找的方式来定位某一元素,请编写二分查找的算法,在数组中查找指定元素. 给定一个整数数组A及它的大小n,同时给定要查找的元素val,请返回它在 ...

  4. cmake之生成动态库

    演示源码下载地址: https://github.com/mohistH/demo_cmake_dylib 把文仅为参考. 以实际情况为准 1.目录结构 │ CMakeLists.txt │ inde ...

  5. 【LeetCode】1094. Car Pooling 拼车

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 差分数组 代码 日期 题目地址:https://le ...

  6. 【LeetCode】1020. Partition Array Into Three Parts With Equal Sum 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  7. Robot(hdu5673)

    Robot Accepts: 92 Submissions: 188 Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 65536/65536 ...

  8. (4329)Ping pong

    思路:树状数组. 考虑第i个人当裁判,那么只要计算出在他之前比他小的乘在他之后比他大的与在他之前比他大的乘在他之后比他小的,那么用两个树状数组维护一下就行了.复杂的(n*log(n)) 1 #incl ...

  9. C9软件工程非一线城市面试经验

    本人C9软件工程毕业,由于家境一般,不想去一线城市面对天价房价,所以面的都不是互联网大厂. 人生第一面: 2021.11.29 五某汽车 软件工程岗面试 提前3天发了短信,然后拉了一个面试微信群 1. ...

  10. Linux Cgroups详解(一)

    [转载]http://blog.chinaunix.net/uid-23253303-id-3999432.html Cgroups是什么? Cgroups是control groups的缩写,是Li ...