一个实例：
html:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Vuejs</title> <style> .finished { text-decoration: underline; } </style> </head> <body> <div id="demo"> <h1 v-text="title"></h1> <!-- v-model随表单控件的不同而不同 --> <input type="text" v-model="newItem" @keyup.enter="addNew"/> <ul> <li v-for="item in items" :class="{finished: item.isFinished}" @click="toggleFinish(item)"> {{item.label}} </li> </ul> </div> <script src="jquery-3.1.0.min.js"></script> <script src="vue.js"></script> <script src="demo01.js"></script> </body> </html>
js:
var demo = new Vue({ el: '#demo', data: function () { return { title: 'this is a todo list', items: [ /*{ label: 'coding', isFinished: false }, { label: 'walking', isFinished: true }*/ ], newItem: '', liClass: 'thisIsLiClass' }; }, methods: { doSomething: function () { console.log(this.a); }, toggleFinish: function (item) { item.isFinished = !item.isFinished; // 布尔值取反 }, addNew: function () { this.items.push({ label: this.newItem, isFinished: false }); this.newItem = ''; } } });
用localstorage来存储todolist
html:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Vuejs</title> <style> .finished { text-decoration: underline; } </style> </head> <body> <div id="demo"> <h1 v-text="title"></h1> <!-- v-model随表单控件的不同而不同 --> <input type="text" v-model="newItem" @keyup.enter="addNew"/> <ul> <li v-for="item in items" :class="{finished: item.isFinished}" @click="toggleFinish(item)"> {{item.label}} </li> </ul> </div> <script src="jquery-3.1.0.min.js"></script> <script src="vue.js"></script> <script src="demo01.js"></script> </body> </html>
js:
var demo = new Vue({ el: '#demo', data: function () { return { title: 'this is a todo list', items: JSON.parse(window.localStorage.getItem('todolist') || '[]'), newItem: '', liClass: 'thisIsLiClass' }; }, methods: { doSomething: function () { console.log(this.a); }, toggleFinish: function (item) { item.isFinished = !item.isFinished; // 布尔值取反 }, addNew: function () { this.items.push({ label: this.newItem, isFinished: false }); this.newItem = ''; } }, watch: { items: { handler: function (items) { window.localStorage.setItem('todolist', JSON.stringify(items)); }, deep: true } } }); localStorage.setItem('todotype', '1'); //console.log(localStorage.getItem('todotype'));
查看localStorage：
