vue仿移动端输入框 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }

        #a {
            width: 500px;
            height: 50px;
            border: 1px solid #000000;
            display: flex;
        }

        #a span {
            flex: 1;
            border: 1px solid red;
        }
    </style>
    <body>
        <div id="el"  v-cloak>
            <input type="text" name="" id="" value="" :autofocus="mos" maxlength="6" v-model="content" />
            <div id="a">
                <span>{{content[0]}}</span>
                <span>{{content[1]}}</span>
                <span>{{content[2]}}</span>
                <span>{{content[3]}}</span>
                <span>{{content[4]}}</span>
                <span>{{content[5]}}</span>
            </div>
        </div>
    </body>
</html>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#el",
        data: {
            mos: "autofocus",
            /* 自动获取焦点*/
            content: []
        },
        methods: {
            
        },
        mounted:{
            
        }
    })
</script>

 

posted @ 2019-08-23 11:43  一半人生  阅读(1238)  评论(0)    收藏  举报