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>