SoFunction
Updated on 2025-04-05

vue implements simple example of ToDoList

1. Requirements and preparations

1. Prepare

Using bootstrap to implement the basic style of the page (relying on jquery), using vue to implement the function requires

2. Functional Requirements

1) Form implementation and input task list and add it to the display item
2) Click the delete button to pop up the warning box and ask whether to delete it (bootstarp modal box plugin)
3) When deleting, delete the corresponding items (single item deletion, delete all)
4) When the task list is empty, "Data is empty" is displayed v-show

2. Examples

1. Static page

demo uses bootstrap to quickly build pages

1) Form components:
.form, form-group, form-control
2) Modal box:
Style class: .modal,modal-content,modal-header,modal-body,modal-footer
Trigger modal box: data-toggle=”modal”,data-target=”modal box ID”
Cancel the modal box: data-dismiss=”true”
2. Functional implementation
1) Form data:
v-model (data binding), v-on:click=”fun()” (binding event), v-for=”value in dataArr” (traversal),
2) Add tasks
Idea: bind data to the vue instance through v-model (timeStamp, taskItem is used to temporarily store data). When clicking submit, add the submitted data to the task list array in the event response function, and then clear the timeStamp, taskItem used to store data.
3) Delete the task
Add an event response function on the methods attribute in the vue instance, define targetIndex in data to store the clicked button index. When traversing, bind the click event v-on:click=”targetIndex=$index”. When clicking, delete the corresponding index data according to the value of targetIndex.
4) Delete all
Bind all button events, targetIndex=-2, determine whether it is partially deleted or all deleted within the divisor of the deletion response.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Message board</title>
 <script src="../vendor/jquery-1.7."></script>
 <script src="../vendor/"></script>
 <link href="../vendor/" type="text/css" rel="stylesheet"/>
 <script src="../vendor/vue/dist/"></script>
</head>
<body>
 <div class="container" >
  <form >
   <div class="form-group">
    <label for="timeStamp">time</label>
    <input type="datetime"  v-model="timeR" name="timeStamp" class="form-control">
   </div>
   <div class="form-group">
    <label for="todoItem" class="">Task</label>
    <input type="text"  name="todoItem" v-model="taskItem" class="form-control">
   </div>
   <div class="form-group">
    <button class="btn btn-success" v-on:click="add()" type="button">Add to</button>
    <button class="btn btn-danger" type="submit">Reset</button>
   </div>
  </form>
  <table class="table table-bordered text-center">
   <caption><h3>Task清单</h3></caption>
   <tr >
    <th class="text-center">Serial number</th>
    <th class="text-center">time</th>
    <th class="text-center">Task</th>
    <th class="text-center">operate</th>
   </tr>
   <tr v-for="value in taskList">
    <td>{{$index+1}}</td>
    <td>{{}}</td>
    <td>{{}}</td>
    &lt;td&gt;&lt;button class="btn btn-danger" data-toggle="modal" data-target="#alertBox" v-on:click="targetIndex=$index">Delete</button></td>   &lt;/tr&gt;
   &lt;tr v-show="!=0"&gt;
    &lt;td colspan="4" class="text-right"&gt;&lt;button class="btn btn-danger" data-toggle="modal" data-target="#alertBox" v-on:click="targetIndex=-2">Delete all</button></td>   &lt;/tr&gt;
   &lt;tr v-show="==0"&gt;
    &lt;td colspan="4" class="text-muted" &gt;No data yet......&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div role="dialog" class="modal" &gt;
   &lt;div class="modal-dialog"&gt;
    &lt;div class="modal-content"&gt;
     &lt;div class="modal-header"&gt;remind：&lt;/div&gt;
     &lt;div class="modal-body text-center" v-show="targetIndex&gt;0"&gt;
      Are you sure you want to delete it？？？
     &lt;/div&gt;
     &lt;div class="modal-body text-center" v-show="targetIndex==-2"&gt;
      Are you sure you want to delete all？？
     &lt;/div&gt;
     &lt;div class="modal-footer"&gt;
      &lt;button class="btn btn-danger" data-dismiss="modal" v-on:click="deleteFn(targetIndex)"&gt;confirm&lt;/button&gt;
      &lt;button class="btn btn-primary" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;

 &lt;/div&gt;
 &lt;script&gt;
  var vm=new Vue({
   el:"#box",
   data:{
    timeR:'',
    taskItem:'',
    targetIndex:-1,
    taskList:[
     {
      timeStamp:'2016-12-03',
      task:'Study and study'
     },
     {
      timeStamp:'2016-12-03',
      task:'Code Code'
     }
    ]
   },
   methods:{
    add:function(){
     ()
     ({
      timeStamp:,
      task:
     });
     ="";
     ="";
    },
    deleteFn:function(index){
     if(index&gt;0){
      (index,1)
     }else{
      =[]
     }
    }
   }
  })
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Replenish:

1) v-on:click abbreviation form: @click
2) When passing event object in vue: $event
3) Event bubbles (native: =true, @="function" in vue)
4) Block the default behavior of the browser: (native: (), vue @="function")

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.