新建組件todoList.vue，在App.vue中引入

import TodoList from "./components/todoList";

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

<template> <div id="app">  <h1>TO DO LIST !</h1>  <todo-list></todo-list> </div></template>

 三處缺一不可，第一處引入文件，第二處注冊組件，第三處聲明組件位置

由于html中不區分大小寫，所以駝峰命名方式中的大寫變為-，即第三處中寫成todo-list，不理解的可以動手實驗一下！

todoList.vue中data如下：

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

 有三件事情：homework、run、drink water，通過v-for渲染：

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

列表展示完成，現在添加點擊列表，改變列表樣式，標記為完成！

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

添加v-on:click，v-bind:class

v-on:click=”done(item)”表示點擊執行done方法，item作為參數。

v-bind:class=”{done:item.finish}”表示，如果item.finish==true時，class=“done”。

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

.done{  color: red; }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。