随机生成id——uuid

原创已于 2024-01-10 20:56:58 修改 · 618 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2024-01-10 20:32:38 首次发布

本文介绍了如何在VScode中通过终端安装并引入nanoid库，以便在Vue组件中生成唯一的id。作者提供了使用nanoid的代码片段和一个简单的MyHeader组件实例，展示了如何在组件的方法中利用nanoid生成todo对象的id。

1.在VScode打开终端安装

npm i nanoid
在这里插入图片描述

2.按需引入nanoid中的nanoid即可

import {nanoid} from 'nanoid'

3.使用nanoid

const todoObj = {id:nanoid(),title:this.title,done:false}

4.举例：

<script>
import {nanoid} from 'nanoid'
   export default {
   name:'MyHeader',
   data() {
      return {
         title:''
      }
   },
   methods:{
      add(e) {
         // 将用户的输入包装成一个todo对象
         const todoObj = {id:nanoid(),title:this.title,done:false}
         
      }
   }
   }
</script>