在App.vue的script标签中,有三部分内容,分别是data(用来存放数据的变量),methods(被调用的方法),watch(监控页面某个变量变化产生相应的变化)
1.首先,用v-html来获取data中title的数据
2.v-for对items中的每一项数据进行循环获取
3.v-bind:class,通过isFinished属性给其设置一个class,用来设置并改变状态
4.点击时,状态切换,v-on:click调用methods中的函数,来动态改变事项的状态
5.增加一个输入框input来添加新的item,点击时调用函数,使用v-on:keyup.enter=“addNew”;(没增加一项,在函数中要设置input的v-model为空,这样可以自动清理输入框)
6.增加在localstorage中存储items,import引入文件(包含两个函数)
7.watch监听items,发生变化的时候,调用save函数将数据存入localstorage中——键值对的形式
代码:
<template>
<div id="app">
<!--v-html可以把span当成html,而v-text只能将其当成文本解释出来-->
<h1 v-html="title"></h1>
<input v-model="newItem" v-on:keyup.enter="addNew">
<ul>
<li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)">
{{item.label}}
</li>
</ul>
</div>
</template>
<script>
import Store from './store'
export default {
data: function () {
return {
title: 'This is a todo list',
items: [
],
newItem:""
}
},
watch:{
items:{
handler:function (items) {
Store.save(items)
},
deep:true
}
},
methods: {
toggleFinish: function (item) {
item.isFinished = !item.isFinished
},
addNew:function () {
this.items.push({
label:this.newItem,
inFinished:false
})
this.newItem=""
}
}
}
</script>
<style>
#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;
}
.finished{
text-decoration: underline;
}
</style>