zoukankan html css js c++ java

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：

查看全文

相关阅读:
Kubernetes Admission
kops文章
 eks文章
 AWS CloudFormation
AWS Secrets Manager
如何在C# WinForm 程序中使用WebBrowser控件时设置COOKIE的值。
Windows Server 2008 服务器核心（Serve Core）实战2
让IIS支持WAP站点。
C#中的委托,匿名方法和Lambda表达式(转载)
数据库状态回复指令。

原文地址：https://www.cnblogs.com/lqcdsns/p/5754897.html