Vue 获取 DOM--实例，页面一打开被focus

Vue 获取 DOM--实例

本文章主要介绍：

1.vue获取DOM元素

2. $nextTick dom更新后执行回调函数，获取更新后的DOM并对其进行操作

下面看代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue DOM实例</title><script src="vue.js"></script><script src="elementUI.js"></script><link rel="stylesheet" href="elementUI.css">
</head><body><div id="app"></div><script>Vue.component('App', {data() {return {isShow: false,msg: 'ggfhgf'}},template: `<div class="app"><el-button ref="btn">btn1</el-button><el-input type="text"ref="input"v-show="isShow"v-model="msg"></el-input>{{msg}}</div>`,mounted() {this.isShow = true;console.log(this.$refs.btn); //获取dom元素，被获取的dom元素被绑定ref//$nextTick dom更新后执行回调函数，获取更新后的DOM并对其进行操作this.$nextTick(() => {this.$refs.input.focus(); //页面一打开 就input 框被focus})}})new Vue({el: '#app',template: `<App />`})</script>
</body></html>

希望对您有帮助！

Vue 获取 DOM--实例，页面一打开被focus相关推荐

js 获取dom离页面编剧_页面对象之外：具有宁静性和编剧模式的下一代测试自动化
js 获取dom离页面编剧在当今快节奏的软件交付世界中,自动化的验收测试至关重要. 一组高质量的自动验收测试可帮助您减少浪费在手动测试和修复错误上的时间,从而更快地交付有价值的功能. 与行为驱动开发 ...
vue 获取dom子元素_vue获取dom元素注意事项
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...
vue获取dom元素的几种方式
在任意标签上:ref="xx" 获取dom元素:this.$refs.xx. 如图: mounted()时才能获取this.$refs.xx 获取dom标签:this.$refs. ...
Vue的基础认知二---vue的双向绑定/vue获取DOM节点
在这篇博文之前,我们已经开了一个vue的头了,需要的小伙伴可以点击这个链接:Vue的基础认知一-构建环境/v指令的使用,好了,我们继续来看我们接下来要看的内容. 一.vue的双向绑定 mvvm框架: ...
Vue获取DOM元素并修改属性
Vue获取DOM元素 Vue获取DOM元素有两种方法直接给相应的元素加id,然后再使用document.getElementById("id");获取使用ref,给相应的元素加 ...
Vue 获取DOM元素，给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况给标签绑定ref属性使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom ...
八.vue获取dom元素
vue获取dom元素方法一:直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式方法二:使用ref,给相应的元 ...
Vue笔记四：Vue获取DOM元素和组件元素的方法
文章目录 Vue获取组件元素 ref获取组件元素 Vue获取组件元素如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的元素对象,示例如下: 全部代码: <!DOCTY ...
ref 引用(vue获取DOM元素）
ref 引用 jquery 牛逼简化了程序员操作DOM的过程 vue 优势: MVVM 在 vue 中,程序员不需要操作DOM.只需要把数据维护好!(数据驱动视图) 结论:在 vue 项目,强烈不建 ...

Vue 获取 DOM--实例，页面一打开被focus

Vue 获取 DOM--实例

本文章主要介绍：

Vue 获取 DOM--实例，页面一打开被focus相关推荐

最新文章

热门文章