Vue给DOM元素添加事件的特殊情况

最新推荐文章于 2024-06-06 10:28:40 发布

2B青年弹棉花

最新推荐文章于 2024-06-06 10:28:40 发布

阅读量2.3k

点赞数

分类专栏： Vue学习文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42158198/article/details/104764412

版权

Vue学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"src="../vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
    var App = {
        data(){
            return{
                flag:false,
                paw:''
            }
        },
        template: `
                <div>
                    <button ref="btn">按钮</button>
                    <input type="password" v-show="flag" ref="input" v-model="paw"/>
                    <h1>密码：{{paw}}</h1>
                </div>
            `,
        mounted(){
            //HTML渲染后操作DOM
            console.log('mounted: '+this.$refs.btn);
            //页面加载后,获取更改的DOM元素
            this.flag = true;
            this.$nextTick(()=>{
                this.$refs.input.focus();
            });
        },
        methods(){

        }
    };
    new Vue({
        el:'#app',
        components:{
            App:App
        },
        template:`<App />`
    });
</script>
</html>