<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div>
</div>
<form action="#" method="post" id="app">
<!-- 下面的value的值原样展示:并没用到Vue对象的值,而是显示user.username
要想value的值显示的是Vue对象的data的值,就用到v-model这个属性,即可
-->
传统value 用户名:<input type="text" id="ctusername" value="user.username"/>
传统value 密码:<input type="text" id="ctpassword" value="user.password"/>
<br>
<!-- 显示的是老王,123456-->
Vue 用户名:<input type="text" id="username" v-model="user.username"/>
Vue 密码:<input type="text" id="password" v-model="user.password"/>
</form>
<script>
new Vue({
el:"#app",
data:{
user:{
username:"老王",
password:"123456"
}
}
});
</script>
</body>
</html>
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!
常见资源合集和破解 fmvvvteih...