vue的应用

v-for中:key的作用

因为在vue,angular中，会采取”就地复用“的模式。就地复用：如果数据项的顺序被改变，vue将不会移动DOM元素来匹配数据项的顺序，而是简单复用此处每一个元素。

<div v-for='item in list'>
{{文本}} <input /> <button @click="将item在list中的位置下移"/>
</div>

在"就地复用"策略中, 点击按钮, 输入框不随文本一起下移, 是因为输入框没有与数据(data)绑定, 所以vuejs默认使用已经渲染的dom, 然而文本是与数据绑定的, 所以文本被重新渲染. 这种处理方式在vue或者angularjs中都是默认的列表渲染策略, 因为高效.

这种”就地复用“一般在”列表展示“的场景中不会出现问题，所以建议：如果你的列表元素存在与用户交互的场景(比如form表单或者重新排序等)，那么请为v-for指令设置key参数，key指向列表中每一个元素的唯一值

<el-carousel-item v-for="(item,index) in lunbo" :key="index">
                  <img :src="item" alt="" style="width:100%;height:100%">
                  <!-- <div>{{index}}</div> -->//index从0开始
</el-carousel-item>