vue学习(十一) v-for使用的注意事项:2.2.0+之后的版本里,当在组件中使用v-for时,key是必须的,它是用来表示唯一身份的
//html <div id="app"> <div>
<label>id
<input type="text" v-model="id"/>
</label>
<label>name
<input type="text" v-model="name"/>
</label>
<input type="button" value="添加" @click="add"/>
</div>
//注意v-for循环的时候, key属性只能使用string或者number
//注意key在使用的时候 必须使用v-bind 属性绑定的形式,指定key的值
<p v-for="item in list" v-bind:key="item.id">
<input type="checkbox"/>{{item.id}}---
{{item.name}}
</p> </div> //script <script> var vm = new Vue({ el:'app', data:{
id:'',
name:'', list:[
{id:1, name:'韩非'},
{id:2, name:'魏庄'},
{id:3, name:'张良'},
{id:4, name:'紫女'}
] }, methods:{//methods中定义了当前vue实例中所有可用的方法 add(){
this.list.unshift({id: this.id, name: this.name})
} } }) </script>
注意:
在组件中,使用v-for循环的时候,或者在一些特殊情况下,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串、数字类型的key,并且要为key使用v-bind
标签:
vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)