|
|
@@ -0,0 +1,89 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <style>
|
|
|
+ button {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
|
|
+ <div id="root">
|
|
|
+ <h1>学生信息</h1>
|
|
|
+ <button @click="addAge">年龄+1岁</button> <br />
|
|
|
+ <button @click="addSex">添加性别属性，默认值：男</button> <br />
|
|
|
+ <button @click="updateSex">修改性别</button> <br />
|
|
|
+ <button @click="addFriend">在列表首位添加一个朋友</button> <br />
|
|
|
+ <button @click="updateFirstFriendName">
|
|
|
+ 修改第一个朋友的名字为：张三
|
|
|
+ </button>
|
|
|
+ <br />
|
|
|
+ <button @click="addHobby">添加一个爱好</button> <br />
|
|
|
+ <button @click="updateHobby">修改第一个爱好为：开车</button> <br />
|
|
|
+ <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br />
|
|
|
+ <h3>姓名：{{ student.name }}</h3>
|
|
|
+ <h3>年龄：{{ student.age }}</h3>
|
|
|
+ <h3 v-if="student.sex">性别：{{student.sex}}</h3>
|
|
|
+ <h3>爱好：</h3>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(h,index) in student.hobby" :key="index">{{ h }}</li>
|
|
|
+ </ul>
|
|
|
+ <h3>朋友们：</h3>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(f,index) in student.friends" :key="index">
|
|
|
+ {{ f.name }}--{{ f.age }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <script src="./vue.js"></script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ const vm = new Vue({
|
|
|
+ el: "#root",
|
|
|
+ data: {
|
|
|
+ student: {
|
|
|
+ name: "tom",
|
|
|
+ age: 18,
|
|
|
+ hobby: ["抽烟", "喝酒", "烫头"],
|
|
|
+ friends: [
|
|
|
+ { name: "jerry", age: 35 },
|
|
|
+ { name: "tony", age: 36 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ addAge() {
|
|
|
+ this.student.age++;
|
|
|
+ },
|
|
|
+ addSex() {
|
|
|
+ this.$set(this.student,'sex','男');
|
|
|
+ },
|
|
|
+ updateSex() {
|
|
|
+ this.$set(this.student,'sex','未知');
|
|
|
+ },
|
|
|
+ addFriend() {
|
|
|
+ this.student.friends.unshift({name:"Jack",age:21});
|
|
|
+ },
|
|
|
+ updateFirstFriendName() {
|
|
|
+ this.student.friends[0].name = '张三';
|
|
|
+ },
|
|
|
+ addHobby() {
|
|
|
+ this.student.hobby.push("于谦");
|
|
|
+ },
|
|
|
+ updateHobby() {
|
|
|
+ this.$set(this.student.hobby,0,'开车');
|
|
|
+ },
|
|
|
+ removeSmoke() {
|
|
|
+ // this.student.hobby = this.student.hobby.filter((item) => {
|
|
|
+ // return item != '抽烟';
|
|
|
+ // })
|
|
|
+ this.student.hobby.splice(0,1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e