Vue------shortid组件的安装及使用

蔚落 2023-02-23 12:11 9阅读 0赞

## 一、shortid组件安装步骤 ##

> 插件shortid是生成随机ID的

1.  cmd 进入到项目目录中，输入npm i shortid --save 或 在webstorm项目中右击，Open in Terminal中输入：npm i shortid --save
2.  导入shortid模块 : import shortid from ‘shortId’
3.  定义数组，装安装的id
4.  shortId.generate()
5.  卸载shortid的命令：npm uninstall shortid

## 二、使用shortid生成随机id ##

**例子**

<template>
        <div id="box">
            <ul>
                <li v-for="(i,index) in people" :key="id[index]">
                    { { i.name}} { { i.age}} { { i.sex}} key { { id[index]}}
                </li>
            </ul>
        </div>
    
    </template>
    
    <script>
        import shortId from 'shortid'
        export default { 
            name: "List",
            data(){ 
                return{ 
                    people:[
                        { name:"张三",age:20,sex:"男"},
                        { name:"李四",age:21,sex:"女"},
                        { name:"王五",age:22,sex:"男"}
                    ],
                    id:[]//装生成的id(shortid)
                }
            },
            mounted(){ 
                this.id=this.people.map(value => shortId.generate());
            }
        }
    </script>

**运行截图**

![在这里插入图片描述][20200707132615570.png]

[20200707132615570.png]: https://img-blog.csdnimg.cn/20200707132615570.png

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 K8s组件：etcd安装、使用及原理（Linux）

K8s组件：etcd安装、使用及原理（Linux） 1 介绍及安装 1.1 介绍分布式系统架构中对一致性要求很高，etcd就满足了分布式系统中的一致性要求。

痛定思痛。/ 2024年03月22日 18:41/ 0 赞/ 94 阅读

相关 Vue------shortid组件的安装及使用

一、shortid组件安装步骤 > 插件shortid是生成随机ID的 1. cmd 进入到项目目录中，输入npm i shortid --save 或在webst

蔚落/ 2023年02月23日 12:11/ 0 赞/ 10 阅读

相关 ContentProvider组件的使用

目录 1.概念讲解 2.示例（访问手机通讯录） 1.概念讲解（1）ContentProvider的概述：当我们想允许自己的应用数据允许别的应用进行

「爱情、让人受尽委屈。」/ 2023年01月01日 15:57/ 0 赞/ 178 阅读

相关 vux 组件库首次使用安装

1、首先通过脚手架新建一个项目，过程略。 > 创建完项目后，在项目里安装vux，通过命令 npm install vux --save 安装 2、安装vux-loa

雨点打透心脏的1/2处/ 2022年12月13日 04:41/ 0 赞/ 212 阅读

相关 React组件了解及使用

组件的定义： 1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等) 2. 为什么要用组件：一个界面的功能更复杂 3. 作用：复

港控/mmm°/ 2022年11月08日 11:29/ 0 赞/ 154 阅读

相关 uni-app 组件的使用(easycom组件模式)

uni-app只支持（.vue 组件）。其他的诸如：动态组件，自定义 render，和 `<script type="text/x-template">` 字符串模版等，在非H

忘是亡心i/ 2022年10月27日 01:56/ 0 赞/ 913 阅读

相关 Vue组件component创建及使用

[Vue组件component创建及使用][Vue_component] 组件化与模块化的区别　　什么是组件：组件的出现，就是为了拆分Vue实例的代码量，能够让我们以

待我称王封你为后i/ 2022年09月17日 06:14/ 0 赞/ 241 阅读

相关安装python组件

安装 \easy\_install tornado \easy\_install pymongo \easy\_install beautifulsoup 卸

た入场券/ 2022年08月25日 14:46/ 0 赞/ 175 阅读

相关 Android【Service组件】【基本概念及使用】

概念 1.Service是一个应用组件，它用来在后台完成一个时间跨度比较大的工作，且没有关联任何界面。着重理解这里的后台，去区分Service和线程的区别：

￡神魔★判官ぃ/ 2022年06月14日 01:49/ 0 赞/ 220 阅读

相关 vue的安装及element组件的安装

一、新建vue项目 1、首先需要下载nodejs，安装后打开命令窗口可以使用npm包管理工具 npm集成在node中的，所以直接输入npm-v查看npm的版本信息 2、n

一时失言乱红尘/ 2021年09月16日 14:54/ 0 赞/ 378 阅读