yesen
/
vue-sgg


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../../logo.svg" />
    <title>vue数据监测</title>
  </head>
  <body>
    <div id="root">
      <h1>学生信息</h1>

      <div>
        <button @click="incrementAge">年龄+1岁</button>
        <button @click.once="addGender">添加性别</button>
        <button @click="updateGender">修改性别</button>
        <button @click.once="addFriend">在第1个位置添加朋友</button>
        <button @click.once="updateFirstFriend">
          修改第一个朋友的名字为张三
        </button>
        <button @click.once="addHobby">添加一个爱好</button>
        <button @click.once="updateFirstHobby">修改第一个爱好为开车</button>
      </div>

      <div>姓名：{{student.name}}</div>
      <div>年龄：{{student.age}}</div>
      <div v-if="student.gender">年龄：{{student.gender}}</div>

      <h2>爱好</h2>
      <ul>
        <li v-for="(h,idx) in student.hobby" :key="idx">{{h}}</li>
      </ul>

      <h2>好友</h2>
      <ul>
        <li v-for="(f,idx) in student.friends" :key="idx">
          {{f.name}} - {{f.age}}
        </li>
      </ul>
    </div>

    <script src="../../vue.js"></script>
    <script>
      Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。

      const vm = new Vue({
        el: "#root",
        data: {
          student: {
            name: "yesen",
            age: 19,
            hobby: ["抽烟", "喝酒", "烫头"],
            friends: [
              { name: "jerry", age: 32 },
              { name: "tony", age: 41 },
            ],
          },
        },
        methods: {
          incrementAge() {
            this.student.age++;
          },
          addGender() {
            // this.$set(this.student, "gender", "男");
            this.student = { ...this.student, gender: "男" };
          },
          updateGender() {
            if (!this.student.gender) {
              this.addGender();
            }
            this.student.gender = "女";
          },
          addFriend() {
            // this.student.friends.unshift({ name: "王一", age: 21 });
            this.student.friends = [
              { name: "王一", age: 21 },
              ...this.student.friends,
            ];
          },
          updateFirstFriend() {
            // this.student.friends.splice(0, 1, {
            //   ...this.student.friends[0],
            //   name: "张三",
            // });
            // Vue.set(this.student.friends, 0, {
            //   ...this.student.friends[0],
            //   name: "张三",
            // });
            this.student.friends[0].name = "张三";
          },
          addHobby() {
            // this.student.hobby.push("刷剧");
            this.student.hobby = [...this.student.hobby, "刷剧"];
          },
          updateFirstHobby() {
            // this.student.hobby.splice(0, 1, "开车");
            this.$set(this.student.hobby, 0, "开车");
          },
        },
      });
    </script>
  </body>
</html>