<!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.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>
jQuery转Vue实例源码
4星 · 超过85%的资源 需积分: 47 66 浏览量
2016-05-19
10:20:28
上传
评论
收藏 144KB ZIP 举报 
jQurey.zip （8个子文件） 
jQurey 
vue.js 265KB
Changeing.html 3KB .idea modules.xml 264B jQurey.iml 281B workspace.xml 22KB IndexJQuery.html 3KB IndexVue.html 2KB jquery-2.2.3.js 253KB资源评论
风一样的大叔2018-01-22还可以的资源，初学者可以学习下
cnblogs_quanquan2017-11-01非常好的资源
