Vue简单实现todoList

最新推荐文章于 2024-05-19 17:34:30 发布

OGoodness

最新推荐文章于 2024-05-19 17:34:30 发布

阅读量182

点赞数 1

文章标签： html javascript vue.js

本文链接：https://blog.csdn.net/qq_46275230/article/details/120829938

版权

Html部分

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/vue@next"></script>
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>
      <span>Add a todo </span>
      <form v-on:submit.prevent="addNewTodo">
        <input v-model="mes">
        <button>Add</button>
      </form>
    </div>
    <div>
      <ul>
        <todo-item
          v-for="(item,index) in books"
          :name="item.name"
          :key="index"
          v-on:remove="books.splice(index,1)"></todo-item>
      </ul>
    </div>
  </div>
</body>

Js部分

<script lang="ts">
  const { createApp } = Vue
  const app = createApp({
    data() {
      return {
        id:4,
        mes:"",
        books: [{
          id: 1,
          name: "盗梦空间"
        },
        {
          id: 2,
          name: "泰迪熊"
        }, {
          id: 3,
          name: "惊天魔盗团"
        }]
      }
    },
    methods:{
      addNewTodo(){
        console.log(this.books.length);
        this.books.push({
          id : this.id++ ,
          name : this.mes,
        })
        this.mes =""
      }
    }    

  })
  app.component("todo-item", {
    template: `<li>{{name}}
          <button v-on:click="$emit('remove')">Remove</button></li>`,
    props: ["name"],
    emit: ["remove"]
  })

  app.mount("#app")
</script>

结果：

请添加图片描述

OGoodness

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue简单实现todoList

Html部分<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/vue@next"></script>
复制链接

扫一扫