<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>
