这是一个Vue实例
是进入页面，输入用户民和密码，Vue.js获取到之后通过alert打印出来。
以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script type="text/javascript" src=".//vue.min.js"></script>
</head>
<body>
<div id="app1">
<div class="top-tips"> {{ tpsMsg }} </div>
<div class="input-wrapper">
<div class="flex wrapper-item">
<label for="account" class="flex2 item-name">帐号/手机号</label>
<div class="flex4 item-input">
<input id="account" type="tel" maxlength="11" placeholder="帐号/手机号" autofocus="autofocus" v-model="account">
</div>
</div>
<div class="flex wrapper-item">
<label for="password" class="flex2 item-name">密码</label>
<div class="flex4 item-input">
<input id="password" type="password" placeholder="输入授权密码" v-model="password">
</div>
</div>
</div>
<div class="flex vertical-center license">
<div class="checked"></div>
<div class="text">我已阅读并同意</div>
<div><a href="javascript:void(0);">《授权协议》</a>
</div>
</div>
<div class="bottom-button">
<button id="app1-next-btn" type="button" class="next-button" v-on:click="nextButtonClick">开始授权</button>
</div>
</div>
<script>
var app1 = new Vue(
{
el: '#app1',
data: {
tpsMsg: '我们不会保存您的帐号密码，仅采集与您信用相关的信息。您的信息受严密保护，不对外公开',
account: '',
password: ''
},
methods: {
nextButtonClick: function (){
alert( "account : " + this.account + "\npassword : " + this.password )
}
}
}
);
</script>
</body>
</html>
页面效果：
本文由 Ryan 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为:
2018/02/13 14:40