Vue中的DOM操作

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

示例：

代码语言：javascript复制

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

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

示例：

代码语言：javascript复制

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

3、vue 操作 DOM 完整示例：

template 部分：

代码语言：javascript复制

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

 script 部分：

代码语言：javascript复制

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

    }
  },
  mounted () {
    this.$refs.btn.style.backgroundColor = 'red'
  }
}
</script>

dom ref script

0 人点赞