13.for循环中key属性的使用.html

最新推荐文章于 2023-02-24 13:58:40 发布

这瓜保熟么

最新推荐文章于 2023-02-24 13:58:40 发布

阅读量1.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/luzhensmart/article/details/84204871

版权

vue 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!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="./lib/vue.min.js"></script>

</head>

<body>

     <div id="app">
          <!-- 添加checkbox的功能 -->
          <label>Id:
            <input type="text" v-model:value="inputid">
          </label>

          <label>Name:
                <input type="text" v-model:value="name">
          </label>

          <input type="button" value="添加checkbox的功能" @click='add'>

          <p v-for="item in list">
            <input type="checkbox">{{item.name}}
          </p>

     </div>

     <div id="app2">
            <!-- 添加checkbox的功能 -->
            <label>Id:
              <input type="text" v-model:value="inputid">
            </label>
  
            <label>Name:
                  <input type="text" v-model:value="name">
            </label>
  
            <input type="button" value="添加checkbox的功能" @click='add'>
  
            <p v-for="item in list">
              <input type="checkbox">{{item.name}}
            </p>
  
       </div>

       <div id="app3">
            <!-- 添加checkbox的功能 -->
            <label>Id:
              <input type="text" v-model:value="inputid">
            </label>
  
            <label>Name:
                  <input type="text" v-model:value="name">
            </label>
  
            <input type="button" value="添加checkbox的功能" @click='add'>
  
            <!-- 注意: v-for循环的时候 用key属性的话 key属性只能用number类型的值或者string类型的值
                即: :key的值类型 必须是数字类型或者字符串类型
                而对象类型 是不可以的 比如<p v-for="item in list" :key="item">
                如本例中的 只能用list数组中对象的id属性或name属性 -->
            <p v-for="item in list" :key="item.id">
              <input type="checkbox">{{item.name}}
            </p>
  
       </div>


     <script>

        //正确的方式1
        var vm = new Vue({
             el : '#app',
             data : {
                inputid : '',
                name : '',
                list : [
                 {id : 1,name : '张三1'},
                 {id : 2,name : '张三2'},
                 {id : 3,name : '张三3'},
                 {id : 4,name : '张三4'},
                 {id : 5,name : '张三5'}
             ]
            },
            methods : {
                add(){
                    //push向数组的尾添加一个或更多元素，并返回新的长度。
                    //添加checkbox
                    this.list.push({id : this.id,name : this.name});
                }
            }
        });

        //错误的方式
        var vm2 = new Vue({
             el : '#app2',
             data : {
                inputid : '',
                name : '',
                list : [
                 {id : 1,name : '张三1'},
                 {id : 2,name : '张三2'},
                 {id : 3,name : '张三3'},
                 {id : 4,name : '张三4'},
                 {id : 5,name : '张三5'}
             ]
            },
            methods : {
                add(){
                    //unshift向数组的开头添加一个或更多元素，并返回新的长度。
                    //添加checkbox
                    //问题出现 你开始勾选数组下标为4 也就是id=5的那条数据 当添加一个checkbox id=6 name="张三6"
                    //的数据后 发现勾选的选项错位了 勾选的虽然还是数组下标的4的 但是发现勾选的却是
                    //另一条数组下标为4的数据
                    this.list.unshift({id : this.id,name : this.name});
                }
            }
        });

        //正确的方式2 v-for 加上遍历的key
        var vm3 = new Vue({
             el : '#app3',
             data : {
                inputid : '',
                name : '',
                list : [
                 {id : 1,name : '张三1'},
                 {id : 2,name : '张三2'},
                 {id : 3,name : '张三3'},
                 {id : 4,name : '张三4'},
                 {id : 5,name : '张三5'}
             ]
            },
            methods : {
                add(){
                    //unshift向数组的开头添加一个或更多元素，并返回新的长度。
                    //添加checkbox
                    this.list.unshift({id : this.id,name : this.name});
                }
            }
        });

     </script>

</body>

</html>

这瓜保熟么

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
13.for循环中key属性的使用.html

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;&lt;met
复制链接

扫一扫