转载自：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>