zoukankan      html  css  js  c++  java
  • uniApp v-key 数据绑定表示

    <template>
        <view>
          <!--这个key 也是和vue一样的 是保证组件的唯一性 和 数据的唯一性-->
            <block v-for="(item,idnex) in studentArray" :key = "item.id">
                <checkbox> {{item.name}} </checkbox>
                <br>
            </block>
            <button style="background-color: #007AFF; color: #FFFFFF;" @click="addStudent">添加同学</button>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    studentArray:[
                        {id:1086,name:"张三",age:23},
                        {id:1087,name:"咸瑜",age:18},
                        {id:1088,name:"曾阿牛",age:39},
                        {id:1089,name:"00",age:17},
                        {id:1090,name:"小闫妮",age:28}
                    ]
                }
            },
            methods: { 
                addStudent(){
                    let id = ++this.studentArray[this.studentArray.length-1].id;  //模拟id自增长
                    let name = "NewStudent" + id;
                    let age = Math.floor((Math.random()*50) + 10);
                    let newStu = [];
                    newStu.id = id;
                    newStu.name = name;
                    newStu.age = age;
                    this.studentArray.push(newStu);
                }
            }
        }
    </script>
    
    <style>
    
    </style>
    v-key.vue

     主要逻辑在JS中  主要是看key 的

    本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/15271021.html

  • 相关阅读:
    timerfd与eventfd
    boost--asio
    boost--线程
    boost--线程同步
    C++11--lambda表达式
    Java数据类型中String、Integer、int相互间的转换
    Jsoup网页抓取
    线程池
    Java
    用cmd来向mysql导入sql文件
  • 原文地址:https://www.cnblogs.com/bi-hu/p/15271021.html
Copyright © 2011-2022 走看看