网上看到的vue-cli环境下双向绑定的方法亲测好用，可以拿来拓展

1..vue文件

<template>

<div id="dataList">

<h1 v-text="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>

stript部分：

<script>

import Store from '../store'

export default{

data(){

return{

title: "每 日 任 务",

items: Store.fetch(),

/*

[

{"label":"俯卧撑10个","isFinished":true}

{"label":"背单词10个","isFinished":false}

 

]

*/

newItem:''

//liclass:"thisisliclass" //赋值class名称

}

},

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,

isFinished:false

})

this.newItem=''

}

}

}

</script>

 

<style>

#app{width:400px;margin:0 auto;}

.finished{text-decoration:line-through;}

</style>

3.store.js文件

const STORAGE_KEY = 'todos-vuejs'

export default{

fetch(){

return JSON.parse(window.localStorage.getItem(

STORAGE_KEY) || '[]')

},

save (items){

window.localStorage.setItem(

STORAGE_KEY,JSON.stringify(items))

}

}

方法借助于toggleFinish事件与localstorage存值实现