提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

VUE - 引入 npm 安装的模块 以及 uuid模块的使用

Vue安装npm模块 以及 引入 UUID 使用
2023-09-14 08:57:23 时间
<template>
  <div>
      <form @submit.prevent="addTodo">
        <input v-model="title" type="text" name="title" placeholder="请添加代办事项...">
        <input type="submit" value="添加" class="btn">
      </form>
  </div>
</template>

 

<script>
/* 引入npm模块 */
import uuid from 'uuid'
export default {
   name:'AddTodos',
   data() {
       return {
           title:'',
       }
   },
   methods: {
       addTodo(){
           const newTodo = {
               id:uuid.v4(),
               title:this.title,
               completed:false
           }
           console.log(newTodo);
           /* 注册事件，由父级触发 */
           this.$emit('handleAdd', newTodo)
           this.title = ''
       }
   },
}

</script>

 

 

相关文章