Instance todoList project

Create new components, and introduce them in

import TodoList from "./components/todoList";

export default {
 name: 'app',
 components: {
  TodoList
 }
}

<template>
 <div >
  <h1>TO DO LIST !</h1>
  <todo-list></todo-list>
 </div>
</template>

One of the three is indispensable. The first is to introduce files, the second is to register components, and the third is to declare component location

Since html is not case sensitive, the capitalization in camel naming method becomes -, that is, it is written as todo-list in the third place. If you don’t understand, you can experiment with it!

The data in the following:

data () {
   return{
     items:[
      {
        label:"homework",
        finish:false
      },
      {
        label:"run",
        finish:false
      },
      {
        label:"drink water",
        finish:false
      }
     ]
   }
 }

There are three things: homework, run, and drink water, rendered through v-for:

<ul>
  <li v-for="item in items">{{}}</li>
</ul>

The list display is complete. Now add the click list, change the list style, and mark it as finished!

<ul>
  <li v-for="item in items" v-on:click="done(item)" v-bind:class="{done:}">{{}}</li>
</ul>

Add v-on:click, v-bind:class

v-on:click=”done(item)” means clicking to execute the done method, item as a parameter.

v-bind:class="{done:}" means that if ==true, class="done".

methods:{
  done:function (item) {
     = !
  }
 }

.done{
  color: red;
 }

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.