1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 监视数据的原理title>
6 <script type="text/javascript" src="../js/vue.js">script>
7 head>
8 <body>
9
27 <div id="root">
28 <h2>学生信息h2>
29 <button @click=" student.age++ ">年龄+1岁button> <br /> <br />
30 <button @click=" addDefaultSex">添加性别属性，默认值：男button> <br /> <br />
31 <button @click=" student.sex = '未知'">修改性别button> <br /> <br />
32 <button @click=" addFriend">在列表首位添加一个朋友button> <br /> <br />
33 <button @click=" modifyFirstFriendName">修改第一个朋友的名字为：张三button> <br /> <br />
34 <button @click=" addHobby">添加一个爱好button> <br /> <br />
35 <button @click=" modifyHobby">修改一个爱好为开车button> <br /> <br />
36 <button @click=" filterChouyan">过滤爱好中的抽烟button> <br /> <br />
37
38 <h3>姓名：{{student.name}}h3>
39 <h3 v-if="student.sex">性别:{{student.sex}}h3>
40 <h3>年龄：{{student.age}}h3>
41 <h3>爱好：h3>
42 <ul>
43 <li v-for="(h, index) in student.hobby" :key="index">{{h}}li>
44 ul>
45 <h3>朋友们：h3>
46 <ul>
47 <li v-for="(f, index) in student.friends" :key="index">{{f.name}}-{{f.age}}li>
48 ul>
49 div>
50 body>
51
52 <script type="text/javascript" >
53 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
54
55 let vm = new Vue({
56 el: "#root",
57 data:{
58 student:{
59 name: "Tom",
60 age: 18,
61 hobby: ["抽烟", "喝酒", "烫头"],
62 friends:[
63 {name:"Jerry",age:17},
64 {name:"Tony",age:20}
65 ]
66 }
67 },
68 methods:{
69 addDefaultSex(e){
70 // Vue.set(this.student, 'sex', '男');
71 this.$set(this.student, 'sex', '男');
72 },
73 addFriend(e){
74 this.student.friends.unshift({name:"Tim",age:70});
75 },
76 modifyFirstFriendName(e){
77 this.student.friends[0].name = "张三";
78
79 },
80 addHobby(e){
81 this.student.hobby.push('看书');
82 },
83 modifyHobby(e){
84 // this.student.hobby.splice(0,1,'开车')
85 this.$set(this.student.hobby, 0, "开车");
86 },
87 filterChouyan(e){
88 const arr = this.student.hobby.filter((h)=>{
89 return h !== "抽烟"
90 });
91 this.student.hobby = arr;
92 }
93 }
94 });
95 script>
96 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 收集表单数据title>
6 <script type="text/javascript" src="../js/vue.js">script>
7 head>
8 <body>
9
23 <div id="root">
24 <form @submit.prevent="submitForm">
25 账号：<input type="text" v-model.trim="student.username"> <br /><br />
26 密码：<input type="password" v-model="student.password"> <br /><br />
27 性别：
28 男<input type="radio" name="sex" value="man" v-model="student.sex">
29 女<input type="radio" name="sex" value="woman" v-model="student.sex"> <br /><br />
30 年龄：<input type="number" v-model.number="student.age" /> <br /><br />
31 爱好：
32 学习<input type="checkbox" value="study" v-model="student.hobby">
33 打游戏<input type="checkbox" value="game" v-model="student.hobby">
34 吃饭<input type="checkbox" value="eat" v-model="student.hobby"><br /><br />
35 所属校区
36 <select v-model="student.shoolAddr">
37 <option value="">请选择校区option>
38 <option value="beijing">北京option>
39 <option value="shenzhen">深圳option>
40 <option value="shanghai">上海option>
41 <option value="wuhan">武汉option>
42 select>
43 <br /><br />
44 其他信息：
45 <textarea v-model.lazy="student.others">textarea><br /><br />
46 <input type="checkbox" v-model="student.accept">阅读并接受<a href="https://www.cargoarmor.com">《用户协议》a>
47 <br /><br />
48 <button>提交button>
49
50 form>
51 div>
52 body>
53
54 <script type="text/javascript" >
55 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
56
57 let vm = new Vue({
58 el: "#root",
59 data:{
60 student:{
61 username: '',
62 password: '',
63 sex: 'man',
64 age: 27,
65 hobby: [],
66 shoolAddr: '',
67 others: '',
68 accept: true
69 }
70 },
71 methods:{
72 submitForm(e){
73 console.log(JSON.stringify(this.student));
74 }
75 }
76 });
77 script>
78 html>