关于Vue中 v-for指令必须加key的原理揭秘

最新推荐文章于 2023-07-11 18:05:49 发布

飘走的落不离

最新推荐文章于 2023-07-11 18:05:49 发布

阅读量473

点赞数 1

文章标签： vue.js 前端 es6 css css3

本文链接：https://blog.csdn.net/gebieren/article/details/106365051

版权

本文揭示了在Vue中使用v-for指令时添加key属性的重要性。未添加key时，Vue采用‘就地更新’策略导致元素重排问题，影响用户选择。通过为每一项设置唯一key，Vue可以跟踪节点身份，实现更有效的渲染。

摘要由CSDN通过智能技术生成

不添加key的时候，代码如下

<div id="app">
      <div class="content">
        <h2>你最喜欢的女明星:</h2>
        <input type="text" v-model="actorName" />
        <button @click="add">添加其他喜欢的女明星</button>
        <ul>
          <li v-for="item in list">
            <input type="radio" />
            {
  {item}}
          </li>
        </ul>
      </div>
    </div>
    <script src="vue.js"></script>
    <script>
      //关于v-for中key的重要性分析
      const vm = new Vue({
        el: '#app',
        data: {
          actorName: '',
          list: ['刘亦菲', '赵奕欢', 'angerlababe', '刘涛'],
        },
        methods: {
          add() {
            this.list.push(this.actorName)
          },
        },
      })
    </script>