这里我想到了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. Java用户输入数值,做简单的猜数字游戏,导入基础的工具包util

    Java用户输入数值,做简单的猜数字游戏,导入基础的工具包util,导入包的方法为,import java.util.*: 完整的实例代码: /* 导入基础工具包 */ import java.uti ...

  2. SVN 不显示状态图标--解决方法

    [SVN 不显示状态图标--解决方法] 在名字前面加空格, 三个六个空格随意: 参考:https://www.cnblogs.com/lzpong/p/6187366.html

  3. Javascript Iterator

    [Javascript Iterator] 1.@@iterator Whenever an object needs to be iterated (such as at the beginning ...

  4. 第一次登录mysql,使用任何命令都报错ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement.

    问题: 使用临时密码登录成功后,使用任何myql命令,例如show databases;都提示下面的报错 ERROR 1820 (HY000): You must reset your passwor ...

  5. logic:equal 标签的使用(转)

    <logic:equal name="music" property="distrubute" value="true">    ...

  6. jpa orderby

    return criteriaQuery.where(in).orderBy(new OrderImpl(root.get("field1"))).getRestriction() ...

  7. java面试技巧

    简历 1.HR看简历,都是看技术关键词.可以多看招聘要求,简历上要多写些关键词.比如io,集合,多线程,并发,spring,mysql,分布式等等. 2.可以准备多份简历,根据不同的jd发送不同的简历 ...

  8. vue-router导航守卫,限制页面访问权限

    在项目开发过程中,经常会需要登录.注册.忘记密码等,也有很多页面是需要登录后才能访问,有些页面是无需登录就可以访问的,那么vue是怎么来限制这些访问权限问题的呢? vue-router导航守卫的bef ...

  9. [Git] 获取指定的历史版本代码

    首先 ,把项目 clone 到其他文件夹下 git clone git@github.com:skyming/BMAdScrollView.git 然后查看指定历史版本 tree 的 SHA chec ...

  10. jfinal头像裁剪上传服务器

    前端页面完整代码,复制可用,记得导入库文件 <!DOCTYPE html> <html lang="en"> <head> <title& ...