这里我想到了2个方法:

方法一:

直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式

方法二:

使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素

注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空,

     如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值

    如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错:

 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title"

vue获取DOM元素并设置属性的更多相关文章

  1. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  2. vue获取dom元素注意问题

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...

  3. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

  4. Vue获取DOM元素的属性值

    项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...

  5. Vue 获取DOM元素ref

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue获取dom元素

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

  7. Vue 获取dom元素之 ref 和 $refs 详解

    一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...

  8. Vue获取DOM元素样式 && 样式更改

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...

  9. jQuery捕获-获取DOM元素内容和属性

    一.获取内容 1.text()-设置或返回所选元素的文本内容 2.html()-设置或返回所选元素的内容(包括HTML标记) 3.val()-设置或 返回表单字段的值 $(document).read ...

随机推荐

  1. 1.4、CDH 搭建Hadoop在安装之前(推荐的群集主机和角色分配)

    推荐的群集主机和角色分配 要点:本主题描述了Cloudera Manager管理的CDH群集的建议角色分配.您为部署选择的实际分配可能会有所不同,具体取决于工作负载的类型和数量,群集中部署的服务,硬件 ...

  2. Centos7安装出现的问题:找不到安装源或者检查软件配置出错

    安装启动时到以下界面 此时,按一下Tab键,将会出现在屏幕下方出现这一串文字 vmlinuz initrd=initrd.img inst.stage2=hd:LABEL=CentOS\x207\x2 ...

  3. 解题(MiGong--迷宫问题(深度搜索))

    题目描述 定义一个二维数组N*M(其中2<=N<=10;2<=M<=10),如5 × 5数组下所示: int maze[5][5] = { 0, 1, 0, 0, 0, 0,  ...

  4. GreenDao存储自定义类型对象解决方案(转)

    最近公司项目选用GreenDao作为Android客户端本地数据库的对象关系映射框架.对于GreenDao虽然以往也有简单用过,但这还是笔者第一次在实际业务中使用.碰到了题目所述的两个问题,虽然在Tu ...

  5. 把图片上的文字转换成word文字?

    转换后的文字不是很如意,但是免费方便. 1.打开Office办公软件自带的OneNote工具.随便新建一个笔记页面,以方便我们接下来的操作. 2.插入图片.在菜单栏里点击[插入],选择插入[图片],找 ...

  6. IDEA 创建HDFS项目 JAVA api

    1.创建quickMaven 1.在properties中写hadoop 的版本号并且通过EL表达式的方式映射到dependency中 2.写一个repostory将依赖加载到本地仓库中 这是加载完成 ...

  7. Dbutils 连接数据库

    用了JDBC后接着学习Dbutils连接数据库 1.添加驱动包 Class.forName("oracle.jdbc.driver.OracleDriver"); 2.获取数据库连 ...

  8. mute

    mute - 必应词典 英[mjuːt] n.哑吧:沉默的人:[法律]拒绝答辩的被告人:鸟粪 adj.哑的:缄默无言的:(一时)说不出话的:(猎狗)不叫的 v.排泄:减弱…的声音:柔和…的色调 网络静 ...

  9. Watcher、ZK状态、事件类型 ,权限

    zookeeper有watch事件,是一次性触发的,当watch监视的数据发生变化时,通知设置了该watch的client,即watcher. 同样,其watcher是监听数据发送了某些变化,那就一定 ...

  10. sizeof 4字节对齐

    #include <iostream> #include<assert.h> using namespace std; typedef struct sys{ char a; ...