一、题目
创建一个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 交流学习。
乾坤未定,你我皆是黑马