在组件上使用 v-for

2022-04-28 09:03:46 阅读：169 来源： 互联网

标签：title app newTodoText 使用组件 todo id todos

在自定义组件上，你可以像在任何普通元素上一样使用 v-for：

<!DOCTYPE html>
<html lang="en">
  <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" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="todo-list-example">
      <form v-on:submit.prevent="addNewTodo">
        <label for="new-todo">添加 todo</label>
        <input
          v-model="newTodoText"
          id="new-todo"
          placeholder="例如：明天早上跑步"
        />
        <button>添加</button>
      </form>
      <ul>
        <todo-item
          v-for="(todo, index) in todos"
          :key="todo.id"
          :title="todo.title"
          @remove="todos.splice(index, 1)"
        ></todo-item>
      </ul>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            newTodoText: '',
            todos: [
              {
                id: 1,
                title: '看电影',
              },
              {
                id: 2,
                title: '吃饭',
              },
              {
                id: 3,
                title: '上 RUNOOB 学习',
              },
            ],
            nextTodoId: 4,
          }
        },
        methods: {
          addNewTodo() {
            this.todos.push({
              id: this.nextTodoId++,
              title: this.newTodoText,
            })
            this.newTodoText = ''
          },
        },
      })

      app.component('todo-item', {
        template: `
              <li>
                {{ title }}
                <button @click="$emit('remove')">删除</button>
              </li>
            `,
        props: ['title'],
        emits: ['remove'],
      })

      app.mount('#todo-list-example')
    </script>
  </body>
</html>

Result:

标签：title,app,newTodoText,使用,组件,todo,id,todos
来源： https://www.cnblogs.com/my-blog-site/p/16201451.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

在组件上使用 v-for

在自定义组件上，你可以像在任何普通元素上一样使用 v-for：