todo列表实例

最新推荐文章于 2023-04-12 18:12:35 发布

weixin_42232876

最新推荐文章于 2023-04-12 18:12:35 发布

阅读量363

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42232876/article/details/108311798

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

vue官方文档上的小实例

v-on:submit.prevent=“addNewTodo”,指在该表单中的任何提交按钮都可以触发该事件
is=“todo-item” attribute。这种做法在使用 DOM 模板时是十分必要的，因为在 ul元素内只有 li元素会被看作有效内容。这样做实现的效果与 todo-item相同，但是可以避开一些潜在的浏览器解析错误。
vm.$emit( event, arg ) //触发当前实例上的事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <form v-on:submit.prevent="addNewTodo">
    
      <!-- v-on:submit.prevent="addNewTodo",指在该表单中的任何提交按钮都可以触发该事件 -->
      
      <label for="new-todo">Add a todo</label>
      <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
      <button>Add</button>
    </form>
    <ul>
    
      <!-- 这里的 is="todo-item" attribute。这种做法在使用 DOM 模板时是十分必要的，因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与 <todo-item>相同，但是可以避开一些潜在的浏览器解析错误。 -->
      
      <li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title"
        v-on:remove="todos.splice(index, 1)"></li>
    </ul>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    // vm.$emit( event, arg ) //触发当前实例上的事件
    Vue.component('todo-item', {
      template: `
        <li>
          {{ title }}
          <button v-on:click="$emit('remove')">Remove</button>
        </li>
      `,
      props: ['title']
    })
    const vm = new Vue({
      el: '#app',
      data: {
        newTodoText: '',
        todos: [{
            id: 1,
            title: 'Do the dishes',
          },
          {
            id: 2,
            title: 'Take out the trash',
          },
          {
            id: 3,
            title: 'Mow the lawn'
          }
        ],
        nextTodoId: 4
      },
      methods: {
        addNewTodo: function () {
          this.todos.push({
            id: this.nextTodoId++,
            title: this.newTodoText
          })
          this.newTodoText = ''
        }
      }
    })
  </script>
</body>

</html>

weixin_42232876

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
todo列表实例

vue官方文档上的小实例v-on:submit.prevent=“addNewTodo”,指在该表单中的任何提交按钮都可以触发该事件is=“todo-item” attribute。这种做法在使用 DOM 模板时是十分必要的，因为在 ul元素内只有 li元素会被看作有效内容。这样做实现的效果与 todo-item相同，但是可以避开一些潜在的浏览器解析错误。vm.$emit( event, arg ) //触发当前实例上的事件<!DOCTYPE html><html lang=
复制链接

扫一扫