首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue中的DOM操作

Vue中的DOM操作

作者头像
Leophen
发布2019-08-23 22:50:46
1.2K0
发布2019-08-23 22:50:46
举报

1、在要获取的标签中添加 ref="xx"

示例:

<button ref="btn">一个按钮</button>

2、在 mounted 钩子中使用 this.$refs.xx. 获取并操作 DOM 元素

示例:

mounted() {
    this.$refs.btn.style.backgroundColor="red"
}

3、vue 操作 DOM 完整示例:

template 部分:

<template>
  <div>
    <button ref="btn">一个按钮</button>
  </div>
</template>

 script 部分:

<script>
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.$refs.btn.style.backgroundColor = 'red'
  }
}
</script>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-07-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、在要获取的标签中添加 ref="xx"
  • 2、在 mounted 钩子中使用 this.$refs.xx. 获取并操作 DOM 元素
  • 3、vue 操作 DOM 完整示例:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档