传统的方法获取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. 二、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP，支持各类消息收发，音视频通话，附vue实现源码(已开源)-腾讯云后台配置TXIM

    项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...

  2. JAVA判断是否是Ajax请求

    /** * 是否是Ajax异步请求 * * @param request */ public static boolean isAjaxRequest(HttpServletRequest reque ...

  3. Log4j未平，Logback 又起！再爆漏洞？

    前段时间 Log4j接连爆漏洞的事儿相比把大家都折腾的不轻,很多开发都被连夜叫起来修复漏洞.这几天终于平复一些了. 可是,昨晚,忽然看到技术群和朋友圈,有人开始聊Logback 又爆漏洞了. 这是什么 ...

  4. 【蓝桥杯】第十二届蓝桥杯砝码称重（Python题解）

    @ 目录 题目 [80分] 思路 知识点 代码 题目 [80分] 你有一架天平和N个砝码,这N个砝码重量依次是W1,W2,--,WN请你计算一共可以称出多少种不同的重量? 注意砝码可以放在天平两边. ...

  5. git命令行常用操作总结

    关于 更多使用细节(grammar和book),请参考 官网 1.上传代码 1.1 创建自己的远程Repository, github或者gitee 1.2 创建本地git仓库 $ git init ...

  6. 【LeetCode】417. Pacific Atlantic Water Flow 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/pacific- ...

  7. 对XSS的插入的新了解，灵感来自天驿安全

    此次针对的是通过Get请求进行插入的XSS语句,或者dom型的xss,也算是了解到的新的插入方式 首先,JavaScript语言中存在拼接性 可以通过代审后闭合前置语句进行self测试是否可以拼接 s ...

  8. A pure L1-norm principal component analysis

    @ 目录 问题 细节 的损失函数 算法 投影 坐标系 载荷向量 A pure L1-norm principal component analysis 虽然没有完全弄清楚其中的数学内涵,但是觉得有趣, ...

  9. RotateRect(旋转矩形)的倾斜旋转变换矫正

    在Opencv中的图像处理中,经常要用到minAreaRect()函数求最小外接矩形,该函数的返回值就是一个RotatedRect类对象. RotatedRect类定义如下: class CV_EXP ...

  10. .NET 编码的基础知识

    .NET 编码的一些基本概念和分析 简单的类型概念 Hex (16进制) byte 字节 范围是:0~255,二进制下的范围就是00000000~11111111,相当于1字节. byte[] 字节数 ...