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：

相关阅读:
Mysql 数据库表中列的操作
 FreeSWITCH版本更新
 shell脚本58问
 Wireshark 与 Tcpdump
Mysql 中 int(3) 和 int(11) 的区别
 FreeSWITCH 基础
 FreeSWITCH 学习笔记（一）
Mysql 复制表数据（表结构相同）
Centos date 设置自定义时间
 Mysql 主键
原文地址：https://www.cnblogs.com/lqcdsns/p/5754897.html