前端自学(3)-Vue案例：实现简单的待办事项的添加和删除

最新推荐文章于 2024-12-19 10:00:00 发布

原创最新推荐文章于 2024-12-19 10:00:00 发布 · 450 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript #前端框架

今天我们来书写一个Vue案例，通过Vue框架实现一个简单的对于待办事项的添加和删除。下面是代码和注释，供大家阅读。

<!DOCTYPE html>
<html>
<head>
  <title>Vue案例——实现待办事项的增加和删除</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>    <!-- 引入Vue.js文件 -->
</head>
<body>
  <div id="app">    <!-- 编写视图 -->
    <input type="text" v-model="name" placeholder="输入待办事项">   <!-- 页面显示一个文本框，使用v-model命令实现name数据的双向绑定，使用placeholder在文本框中输入内容提示为“输入待办事项” -->
    <input type="button" value="添加" @click="add">                 <!-- 页面显示一个按钮，按钮的名称为”添加“，并为其绑定单击鼠标事件(使用@click命令)到方法add()中 -->
    <div v-for="(task,index) in tasks" :key="index" class="task">   <!-- 再使用div标签包裹每个待办事项。使用v-for命令来遍历数组tasks，索引从0开始 -->
      {{task}}    <!-- 使用插值表达式显示出待办事项的值，会随着数据模型的值而变化 -->
      <input type="button" value="删除" @click="deleteTask(index)">
    </div>
  </div>
</body>

<script>      //创建Vue核心对象，定义数据模型
    new Vue({
      el: "#app",   //相当于CSS中的id选择器，使用"#加id名"的方式调用id为app的区域
      data: {
        name: "",   //定义name变量存储要在输入框输入的内容
        tasks: []   //定义一个空数组来保存添加过的待办事项
      },
      methods: {    //定义Vue实例中的方法，使用methods（注意不管几个方法都是methods，不要写成method）
        add(){      //add()方法用来添加待办事项
          this.tasks.push(this.name);    //使用this.来调用Vue实例中的对象，使用push()方法将待办事项添加到待办事项数组中
          this.name="";                 //之后清空输入待办事项的输入框内容
        },
        deleteTask(index){              //deleteTask()方法用来删除待办事项，注意！不能写成delete，delete是JS中的保留字
          this.tasks.splice(index,1);   //使用splice()方法删除数组中索引从0开始的元素(即待办事项)，1表示只想删除一个元素
        }
      }
    })
  </script>
</html>