Vue 获取DOM元素
获取元素
template 部分
<!-- 用ref属性来命名 -->
<button ref="btn">我是按钮</button>
js 部分
// 在 mounted 里面获取
mounted () {
// 装载之后 此处可以操作dom
console.log(this.$refs.btn);
}
给元素添加事件 需要用到$nextTick
template 部分
<div>
<input ref="input" type="text" v-if="isShow"/>
</div>
js 部分
data () {
return {
isShow: false
}
},
mounted () {
// 装载之后 此处可以操作dom
// 显示元素并获取焦点
this.isShow = true;
this.isShow = false;
this.isShow = true;
// 最终代码执行完毕后 vue才会根据实际的值，进行DOM的操作
// this.$refs.input.focus(); // 无法执行
// 我们希望在vue真正渲染DOM到页面以后才做的事
this.$nextTick(function () {
this.$refs.input.focus();
})
}
