<template>

?<div id="app">

? ?<h1>{{ title }}</h1>

? ?<label for="newItem">

? ? ?<span>新建項目</span>

? ?</label>

? ?<input type="text" id="newItem"

? ? ? ? ? v-model="newItem" placeholder="請輸入新的項目名稱"

? ? ? ? ? v-on:keyup.enter="onAddNewItem()" >

? ?<button @click="onAddNewItem()">新增</button>

? ?<br />

? ?<h3>{{newItem}}</h3>

? ?<div>

? ? ?<ul>

? ? ? ?<li type="none"

? ? ? ? ? ?v-for="item in items" ?

? ? ? ? ? ?v-bind:class="[liClass, {'finished':item.isFinished}]"

? ? ? ? ? ?v-on:click="onToggleFinished(item)" >

? ? ? ? ?{{ item.label }}

? ? ? ?</li>

? ? ?</ul>

? ?</div>

?</div>

</template>

<script>

export default {

?data: function () {

? ?return {

? ? ?title: 'This is a todo list.',

? ? ?items: [

? ? ? ?{

? ? ? ? ?label: 'coding',

? ? ? ? ?isFinished: false

? ? ? ?},

? ? ? ?{

? ? ? ? ?label: 'running',

? ? ? ? ?isFinished: true

? ? ? ?}

? ? ?],

? ? ?liClass: 'isLiClass',

? ? ?newItem: ''

? ?};

?},

?methods: {

? ?onToggleFinished: function (item) {

? ? ? ?item.isFinished = !item.isFinished;

? ?},

? ?onAddNewItem: function () {

? ? ?// alert('新增項目中......');

? ? ?console.log(this.newItem);

? ? ?this.items.push({

? ? ? ?label: this.newItem,

? ? ? ?isFinished: false

? ? ?});

? ? ?this.newItem = '';

? ?}

?}

}

</script>

<style>

?.finished {

? ?text-decoration: underline;

?}

?html {

? ?height: 100%;

?}

?body {

? ?display: flex;

? ?flex-direction: row;

? ?align-items: center;

? ?justify-content: center;

? ?height: 100%;

?}

?#app {

? ?font-family: 'Avenir', Helvetica, Arial, sans-serif;

? ?-webkit-font-smoothing: antialiased;

? ?-moz-osx-font-smoothing: grayscale;

? ?text-align: center;

? ?color: #2c3e50;

? ?margin-top: 60px;

?}

</style>