相关文章推荐
狂野的鸭蛋  ·  北田受奶奶庙_百度百科·  2 月前    · 
宽容的莲藕  ·  监管与发展并重的私募新篇章——《私募投资基金 ...·  1 年前    · 
个性的小刀  ·  9秒带你回顾!科技新发oneyg99aqqv ...·  1 年前    · 
傲视众生的碗  ·  李建成院士负责的“现代大地测量与地球动力学学 ...·  1 年前    · 
低调的葡萄酒  ·  身國一理的《老子河上公章句》__臺灣博碩士論 ...·  1 年前    · 
小百科  ›  javascript - vue.js中key的用法 -
key javascript
爱玩的金鱼
3 年前
segmentfault segmentfault
注册登录
问答 博客 标签 活动
发现
✓ 使用“Bing”搜本站 使用“Google”搜本站 使用“百度”搜本站 站内搜索
注册登录
  1. 首页
  2. 问答
  3. javascript
  4. 问答详情

vue.js中key的用法

头像
还有梦想的咸鱼
117 4 42 56
发布于
2017-03-31

刚学vue.js,看着官方API学习的,文档中的KEY属性一直没搞懂,感觉有key没key没什么区别。

html:
<p>key的使用实例:</p>
    <li v-for="item in itemList" :key="item.text">
        <span>{{item.text}}</span>,<span>{{item.value}}</span>
    <li v-for="item in itemList">
        <span>{{item.text}}</span>,<span>{{item.value}}</span>
var text = new Vue({
    el: ".v-text",
    data: {
        itemList: [
            {text: 1, value: "hi1"},
            {text: 3, value: "hi3"},
            {text: 2, value: "hi2"},
            {text: 4, value: "hi4"},
            {text: 8, value: "hi8"}

在chrome的控制台用js插入itemList的内容,2个ul的效果是一样的,我试过

text.itemList.push({text: 9,value : "hi9"})
text.itemList.push({text: 1,value : "hi11"})

没发现有什么不同的, 求大神帮忙解答下vuejs中key的用法

javascript vue.js
阅读 20.6k
3 个回答
得票 最新
头像
悠扬小Q
2.3k 2 8 24
发布于
2017-03-31
✓ 已被采纳

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值.
建议尽可能使用 v-for 来提供 key ,除非迭代 DOM 内容足够简单,或者你是故意要依赖于默认行为来获得性能提升。因为它是 Vue 识别节点的一个通用机制, key 并不特别与 v-for 关联,key 还具有其他用途,我们将在后面的指南中看到其他用途。

详细可见官网:
https://cn.vuejs.org/v2/guide/list.html#key

头像
naice
2k 4 38 78
发布于
2017-03-31
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}

这才是正确的写法吧

 
推荐文章
狂野的鸭蛋  ·  北田受奶奶庙_百度百科
2 月前
宽容的莲藕  ·  监管与发展并重的私募新篇章——《私募投资基金监督管理条例》解读
1 年前
个性的小刀  ·  9秒带你回顾!科技新发oneyg99aqqv227个致敬韩寒致敬韩寒从文 ...
1 年前
傲视众生的碗  ·  李建成院士负责的“现代大地测量与地球动力学学科创新引智基地”在 ...
1 年前
低调的葡萄酒  ·  身國一理的《老子河上公章句》__臺灣博碩士論文知識加值系統
1 年前
Link管理   ·   Sov5搜索   ·   小百科
小百科 - 百科知识指南