Vue中的DOM操作

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券