vue.js（二）

一个实例：

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：

相关阅读:
[读书笔记] 代码整洁之道（五）: 系统
 [读书笔记] 代码整洁之道（四）: 类
 [读书笔记] 代码整洁之道（三）: 错误处理及边界接口处理
 [读书笔记] 代码整洁之道（二）：对象和数据结构
 程序猿的书单
 selenium自动化-java-封装断言
 java环境变量详细配置步骤
 Selenium-java-TestNg-的运行
 quicktest Professional下载地址，无限制使用方法
 常用网站收集
原文地址：https://www.cnblogs.com/lqcdsns/p/5754897.html