77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
<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>
|