vue 生命周期 mounted输入框获取焦点

最新推荐文章于 2023-11-16 14:23:05 发布

虾米大王

最新推荐文章于 2023-11-16 14:23:05 发布

阅读量104

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/modern358/article/details/132052182

版权

Vue 专栏收录该内容

661 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mounted函数应用</title>
    <style type="text/css">
        .search-container{
            width: 50%;
            height: 50vh;
            background-color: white;
            border: 2px solid lightblue;
        }

        .search-img{
            width: 240px;
            height: 120px;
            margin: 45px auto 15px auto

        }

        .search-box{
            width: 80%;
            height: 200px;
            margin: 0 auto;

        }

        .search-box input{
            width: 65%;
            height: 26px;
            line-height: 26px;
        }

        .search-box button{
            width: 110px;
            height: 33px;
            line-height: 33px;
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="search-container">
            <div class="search-img">
                <img src="https://www.itheima.com/images/logo.png" alt="">
            </div>
            <div class="search-box">
                <input type="text" v-model="words" id="inp">
                <button>搜索</button>
            </div>
        </div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data :{
                words:''
            },
            mounted(){
                //1 等待输入框渲染完成
                //2 让输入框获取焦点
                document.querySelector('#inp').focus();
            }
        })
    </script>
</body>
</html>