转载自：http://blog.csdn.net/violetjack0808/article/details/51451672
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head>
<meta charset="UTF-8">
<title>index</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<h2>学生信息登记</h2>
<br>
<div>
<label>姓名：</label>
<input type="text" placeholder="请输入姓名" v-model="name">
</div>
<div>
<label>性别：</label>
<input id="sex01" type="radio" value="1" v-model="sex">
<label for="sex01">男</label>
<input id="sex02" type="radio" value="2" v-model="sex">
<label for="sex02">女</label>
</div>
<div>
<label>年龄：</label>
<select v-model="age">
<option selected>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
</select>
</div>
<div>
<label>党员：</label>
<input type="checkbox" v-model="member">
</div>
<br>
<button id="btnCommit" v-on:click="commit">提交</button>
<button id="btnReset" v-on:click="reset">重置</button>
<br>
<br>
<label>{{ result }}</label>
</div>
<script>
new Vue({
el: '#app',
data: {
name: '',
sex: '',
age: '',
member: '',
result: ''
},
ready: function () {
alert("加载完成");
},
methods: {
commit: function () {
var name = this.name;
var sex = '';
if (this.sex == 1){
sex = '男';
}else if (this.sex == 2){
sex = '女';
}
var age = this.age;
var member = '';
if (this.member){
member = '党员';
} else {
member = '非党员';
}
var result = name + ' ' + sex + ' ' + age + ' ' + member;
this.result = result;
},
reset: function () {
this.result = '';
}
},
watch: {
'sex': function (val, oldVal) {
console.log('oldVal = ' + oldVal + ' val = ' + val);
}
}
});
</script>
</body>
</html>