<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
ID:<input type="text" v-model="id">
name:<input type="text" v-model="name">
<input type="button" value="添加" @click="add">
<p v-for="(item, i) in result" :key="item">
<input type="checkbox">
ID:{{ item.id }}---name:{{ item.name }}---索引{{ i }}
</p>
</div>
<script>
new Vue({
el: "#app",
data:{
id:'',
name:'',
result:[
{id: 1, name: '李斯'},
{id: 2, name: '嬴政'},
{id: 3, name: '赵高'}
],
},
methods:{
add() {
this.result.unshift({id:this.id,name:this.name});
}
}
})
</script>
</body>
</html>
vue(三)v-for
最新推荐文章于 2024-05-28 23:40:22 发布