[分享]使用vue做todolist

发布于 2024-11-11 14:09:00

今天我们来讲一下如何使用Vue来制作一个TodoList，我们将使用Vue的基础知识和核心概念来创建一个易于使用且优雅的应用程序。首先，我们需要在HTML文件中引入Vue，并设置一个空的div元素用...

今天我们来讲一下如何使用Vue来制作一个TodoList，我们将使用Vue的基础知识和核心概念来创建一个易于使用且优雅的应用程序。

首先，我们需要在HTML文件中引入Vue，并设置一个空的div元素用于我们的TodoList。我们还需要定义一个新的数据对象，其中包含一个名为“items”的空数组。这个数组将用于存储TodoList中的所有条目。

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- TodoList将在这里呈现 -->
  </div>
  
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        items: []
      }
    });
  </script>
</body>
</html>

接下来，我们需要创建添加和删除Todo项的方法。在这里，我们将使用“addTodo”和“deleteTodo”两个方法。 “addTodo”方法将接受一个名为“newTodo”的输入值，并将其推入数据对象中的“items”数组中。 “deleteTodo”方法将接受一个名为“todo”的输入值，并在数据对象中查找并删除该值。

 var app = new Vue({
    el: '#app',
    data: {
      items: []
    },
    methods: {
      addTodo: function(newTodo) {
        this.items.push(newTodo);
      },
      deleteTodo: function(todo) {
        var index = this.items.indexOf(todo);
        this.items.splice(index, 1);
      }
    }
  });

现在，我们需要为用户提供一种添加和删除Todo项的方式。我们将添加两个文本框，一个用于输入新的Todo项，另一个用于指定要删除的Todo项。我们还将添加两个按钮，“Add”和“Delete”，用于调用我们之前创建的方法。

 <div id="app">
    <input type="text" v-model="newTodo">
    <button @click="addTodo">Add</button>
    <br><br>
    <input type="text" v-model="deleteTodo">
    <button @click="deleteTodo">Delete</button>
    
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>

最后，我们需要将界面和数据对象绑定起来。我们将使用Vue的“v-model”指令将文本框的值（即用户输入）与数据对象的属性绑定起来。我们还将使用Vue的“v-for”指令在界面上渲染TodoList的所有条目。

现在，我们的TodoList程序已经完成了。用户可以轻松地添加和删除条目，并且界面会自动更新以反映数据对象的更改。

 <div id="app">
    <input type="text" v-model="newTodo">
    <button @click="addTodo">Add</button>
    <br><br>
    <input type="text" v-model="deleteTodo">
    <button @click="deleteTodo">Delete</button>
    
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
  
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        newTodo: '',
        deleteTodo: '',
        items: []
      },
      methods: {
        addTodo: function() {
          this.items.push(this.newTodo);
          this.newTodo = '';
        },
        deleteTodo: function() {
          var index = this.items.indexOf(this.deleteTodo);
          if (index > -1) {
            this.items.splice(index, 1);
          }
          this.deleteTodo = '';
        }
      }
    });
  </script>

教程 Vue

一个月内的热帖推荐

[分享]使用vue做todolist

91云脑