一、题目

创建一个html文件 ,定义一个账号密码输入框,并将输入框输入的数据和vue实例中的数据进行双向绑定。

二、实现代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建一个html文件 ,定义一个账号密码输入框,并将输入框输入的数据和vue实例中的数据进行双向绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .input_account, .input_password {
            height: 30px;
            width: 120px;
            margin: 10px;
        }
    </style>
</head>

<body>
<div id="app">
    <input type="text" class="input_account" v-model="account" placeholder='请输入用户名'>
    <!-- 插值语法,{{}}-->
    </input>
    <br>
    <input type="password" class="input_password" placeholder='请输入密码' v-model="password">
    </input>
</div>

<script type="text/javascript">
    <!--    创建一个vue对象 -->
    var user = {
        account: "綦枫",
        password: "123456"
    }
    var vue = new Vue({
        el: '#app',//element选择器,选择body中已经声明的元素
        data: user, //在data中注册变量,然后才能在div中拿去使用。
        methods: {}
    });
</script>
</body>
</html>

软件测试工程师一只,也在不断的学习阶段,平时的小经验不定期分享。
博主经验有限,若有不足,欢迎交流,共同改进~
有意可加Q群 908417285 交流学习。
乾坤未定,你我皆是黑马