GraphQL JDK动态代理 extjs6.5 windows coldfusion ios4 EaselJS Animsition vue架构 react脚手架 ajax里面可以嵌套ajax吗 less比较级 git下载代码到本地命令 python运行环境 python类与对象 python创建对象 javaapplet java编程学习 java字符串替换 java创建目录 java文件读取 linux用户 蓝牙运动耳机排行榜 python输入数字 dg分区 js轮播图代码 网络文件服务器 模拟按键 梦幻手游助手 ps水平翻转快捷键 原创检测工具 抖音代码 字符串分割成数组 小程序开发工具下载 骰子牛牛怎么玩 正则表达式数字 微信预约系统 苹果电脑数据恢复 python爬取图片 exe文件反编译
当前位置: 首页 > 学习教程  > 编程语言

vue注重细节的优化(绑定key)

2020/11/24 10:38:29 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

注重细节的优化 绑定key: key是给美一个vnode的为一id,可以依靠key,准确(更快)拿到oldVnode中对应的vnode节点 开发中偶尔会遇到需要生成唯一id的时候,比如对数组的任意一项进行多次增删改,这时就需要给每一项添加唯一标识符来加以区分。 安装短id生成…

注重细节的优化
绑定key:
key是给美一个vnode的为一id,可以依靠key,准确(更快)拿到oldVnode中对应的vnode节点

开发中偶尔会遇到需要生成唯一id的时候,比如对数组的任意一项进行多次增删改,这时就需要给每一项添加唯一标识符来加以区分。

安装短id生成多位字符串id并且保存至生产包
$ npm i shortid --save
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<template>
  <div>
    <h3>遍历数组,带key,这里的key关联phone[唯一性但是有些人会填写错误的]</h3>
    <ul class="left">
      <li v-for="(listone, index) in listones" :key="listone.phone">
        {{ index }}:姓名: {{ listone.name }},年龄: {{ listone.age }},性别:
        {{ listone.sex }},手机号:{{ listone.phone }}
      </li>
    </ul>
    <br />
    <h3>添加shortId使其成为真正的唯一性</h3>
    <ul class="left">
      <li v-for="(listone, index) in listones" :key="listonesKeys[index]">
        Id:{{ listonesKeys[index] }} ---{{ index }}:姓名:
        {{ listone.name }},年龄: {{ listone.age }},性别:
        {{ listone.sex }},手机号:{{ listone.phone }}
      </li>
    </ul>
    <h3>遍历对象,这里展示数组里面的对象</h3>
    <ul class="left">
      <li v-for="(item, key) in listones[0]">{{ key }}----{{ item }}</li>
    </ul>
  </div>
</template>

<script scoped>
import shortId from "shortid";
export default {
  name: "ListRender",
  data() {
    return {
      listones: [
        { name: "姬天道", age: 40, sex: "男", phone: "18898836586" },
        { name: "姬老魔", age: 60, sex: "男", phone: "18898836587" },
        { name: "陆州州", age: 28, sex: "男", phone: "18898836588" },
        { name: "陆阁主", age: 28, sex: "男", phone: "18898836589" },
      ],

      // 关联生成key,把listones里面的数组各个都生成一key
      listonesKeys: [],
    };
  },
  //   在渲染完成之后再调用的
  mounted() {
    //   先拿到这个数组然后赋值
    //   生成唯一性id,把listones里面的数组各个都生成一个id
    this.listonesKeys = this.listones.map((v) => shortId.generate());
  },
};
</script>

<style scoped>
.left {
  text-align: left;
}
</style>

本文链接: http://www.dtmao.cc/news_show_400310.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?