笔记：3.12课程笔记上传

3.12/Vue3Proj/vue-project/src/Com3_4.vue

@@ -0,0 +1,76 @@
+<template>
+<fieldset>
+        <legend>数组对象遍历</legend>
+        <ul>
+          <li v-for="(item,index) in items">
+            {{index+1}}-{{item.bookName}}-{{item.press}}-{{item.author}}
+          </li>
+        </ul>
+      </fieldset>
+      <fieldset>
+        <legend>某一范围内数字遍历</legend>
+        <span v-for="number in 20">{{number}} </span>
+      </fieldset>
+      <fieldset>
+        <legend>对象的属性遍历</legend>
+        <p>
+          <span v-for="(value,key,index) in teacher">
+            {{index}}-{{key}}-{{value}}
+          </span>
+        </p>
+      </fieldset>
+      <fieldset>
+        <legend>普通数组遍历</legend>
+        <p>
+          <span v-for="(value,index) in array">{{index}}-{{value}}</span>
+        </p>
+      </fieldset>
+      <fieldset>
+        <legend>绑定key对象数组遍历</legend>
+        <label>序号:</label
+        ><input type="text" v-model="id" placeholder="输入序号" />
+        <label>姓名:</label
+        ><input type="text" v-model="name" placeholder="输入姓名" />
+        <button type="button" v-on:click="addStudent">添加学生名单</button>
+        <p v-for="user in students" v-bind:key="user.id">
+          <input type="checkbox" /> {{user.id}}--{{user.name}}
+        </p>
+      </fieldset>
+</template>
+
+<script setup lang="ts">
+import {ref  } from "vue";
+
+const items = ref([
+              {
+                bookName: "计算机网络",
+                press: "清华社",
+                author: "张功萱",
+              },
+              {
+                bookName: "Vue.js前端框架技术与实战",
+                press: "清华社",
+                author: "储久良",
+              },
+              {
+                bookName: "HTML+CSS+JavaScript页面设计",
+                press: "电子社",
+                author: "王大松",
+              },
+            ])
+const teacher=ref({
+              name: "储久良",
+              no: "12004004",
+              age: 56,
+            })
+            const array = ref([356, 324, 124, 334, 36, -234])
+            const students = ref([
+              { id: 1, name: "李春进" },
+              { id: 2, name: "张大明" },
+            ])
+const id = ref(0)
+const name = ref("")
+const addStudent = ()=>{
+    students.value.unshift({id:id.value,name:name.value})
+}
+</script>