vue的ref

ref

<template>
  <div>
    <!-- 简单粗暴: 直接把变量和元素绑在一起, 用 ref 属性 -->
    <!-- 变量会存储在 vue的 $refs 属性里 -->
    <input type="text" ref="suibian" />
    <p ref="zz">壮壮</p>
    <div ref="hh">浩浩</div>
    <br />
    <button @click="doFocus">获得焦点</button>
  </div>
</template>

<script>
export default {
  methods: {
    doFocus() {
      // 要操作输入框, 就要先找到这个元素
      // focus(): DOM元素自带的方法, 用来获得焦点
      // document.querySelector('input').focus()
      console.log(this) //this是vue对象, 查看其中的 $refs 属性

      this.$refs.zz.style.color = 'green'
      this.$refs.suibian.focus()
    },
  },
}
</script>

<style lang="scss" scoped></style>