<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>小清单</title>

    <link rel="stylesheet" href="../bootstrap/bootstrap/css/bootstrap.min.css">

    <style>

        /*修饰完成事件样式*/

        .doneIcon {

            color: green;

        }

        .doneText {

            text-decoration: line-through;

        }

    </style>

</head>

<body>

	<script src="../vue/vue.js"></script>

    <div class="container">

        <div class="row">

            <div class="col-sm-6 col-sm-offset-3">

                <div class="panel panel-default" style="margin-top: 80px">

                    <div class="panel-heading" style="background-color: rgba(37,176,211,0.26)">

                        <h3 class="panel-title">小清单</h3>

                    </div>

                    <div class="panel-body" id="app">

                        <!--通过form中默认回车提交,但还需要清除掉form的默认的提交事件;调用自定义的addThing事件-->

                        <form action="" v-on:submit.prevent="addThing">

                            <div class="input-group col-sm-6 col-sm-offset-3">

                                <input type="text" class="form-control" placeholder="请输入待办事件" v-model="inputThing.title">

                                <span class="input-group-btn">

                                <button class="btn btn-default" type="button" v-on:click="addThing"><span

                                        class="glyphicon glyphicon-plus"></span></button>

                        </span>

                            </div><!-- /input-group -->

                        </form>

                        <hr>

                        <ul class="list-group">

                            <li class="list-group-item" v-for="(item, index) in things" v-bind:key="index"

                                v-on:click="done(index)">

                                <span class="glyphicon glyphicon-ok-sign" v-bind:class="{doneIcon:item.status}"></span>

                                <span v-bind:class="{doneText:item.status}">{{ item.title }}</span>

                                <span class="glyphicon glyphicon-remove-sign pull-right"

                                      v-on:click="delThing(index)"></span>

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </div>

	<script>

    let app = new Vue({

        el: '#app',

        data: {

            // 根据设置的status来为完成事件添加样式

            things: [

                {'title': '吃饭', 'status': false},

                {'title': '睡觉', 'status': false},

                {'title': '打豆豆', 'status': false},

            ],

            inputThing: {'title': '', 'status': false},

        },

        methods: {

            addThing() {

                // 如果输入为空或空格(trim)return

                if (this.inputThing.title.trim() === '') {

                    return

                }

                this.things.push(this.inputThing);

                this.inputThing={'title': '', 'status': false}

            },

            // 根据索引删除数组中的数据splice(元素索引,删除几个)=>1,则删除当前元素;不写则删除当前元素及后面的所有

            delThing(index) {

                this.things.splice(index, 1)

            },

            done(index) {

                this.things[index].status = true;

            }

        }

    })

	</script>

</body>

</html>

5. Vue - 小清单实例的更多相关文章

  1. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  2. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  3. VUE小练习(按钮颜色，数组映射)

    VUE小练习(按钮颜色,数组映射) ## 1.有红.黄.蓝三个按钮,以及一个200x200矩形框box, 点击不同的按钮,box的颜色会被切换成指定的颜色 ''' 解法一:我本来的思路,把三个按钮绑定 ...

  4. vue小故事之父子(上下级)通信之父传子props

    vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props  或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...

  5. 微信小程序实例源码大全

    微信小程序实例源码大全下载 微信小应用示例代码(phodal/weapp-quick)源码链接:https://github.com/phodal/weapp-quick 微信小应用地图定位demo( ...

  6. 微信小程序实例教程（一）

    序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...

  7. vue学习笔记 实例（二）

    var data = {a: 1} var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 ...

  8. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  9. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

随机推荐

  1. RHEL 6.6配置网易CentOS镜像的yum源小结

       之前没有使用过网易CentOS镜像的yum源,最近由于需要,遂在一台测试服务器验证.测试了一下如何配置使用网易的Cent0S的yum源.此文仅仅是笔记性质,参考了网上大量资料(文末"参 ...

  2. Script - 检查当前的undo配置和建议设置 (Doc ID 1579035.1)

    Script - Check Current Undo Configuration and Advise Recommended Setup (Doc ID 1579035.1) APPLIES TO ...

  3. Putty 连接centOS7 超时问题

    方法1: #vim /etc/ssh/sshd_config(添加或修改以下配置) ClientAliveInterval 60(每隔60秒给SSH客户端发送一次信号)   ClientAliveCo ...

  4. Fiddler应用——Fiddler过滤功能

    Fiddler的过滤功能在Fiddler右面板处,点击Filters显示如图所示面板. 如图所示,Fiddler的过滤面板主要分为几个部分: 1.Use Filters:是否启用过滤器 2.Actio ...

  5. 实操《kubernetes网络权威指南》之veth pair

    https://book.douban.com/subject/34855927/ 作者: 杜军 出版社: 电子工业出版社出品方: 博文视点出版年: 2019-10页数: 348定价: 89ISBN: ...

  6. The 2017 ACM-ICPC Asia Shenyang Regional Contest

    传送门 F - Heron and His Triangle 直接打表找到规律\(f_i=4f_{i-1}+f_{i-2}\),然后大数预处理一下,对于询问直接输出就行. Code #include ...

  7. 算法设计与分析 1.1 Joyvan的矩阵

    ★题目描述 Joyvan有一个大小为n * m的矩阵,现在他要对矩阵进行q次操作,操作分为如下三种: 0 x y:交换矩阵的x.y两行. 1 x y:交换矩阵的x.y两列. 2 x y:求当前矩阵第x ...

  8. np.unique( )的用法

    该函数是去除数组中的重复数字,并进行排序之后输出. 换句话,我想从一个图片选取 1000个不同的点,随机采点经常遇到相同的点,造成重复.np.unique就是用来解决这个问题

  9. C语言中，字符型数字与常数型数字的加减实现

    char in-str[10],out-str[10]; for(int i=0;i<10;i++) { out-str[i]=9-(in-str[i]-'0')+'0'; }

  10. Ubuntu Idea 快捷键 Ctrl+Alt+S 无法使用解决

    Idea 里习惯了用 Ctrl+Alt+S 打开设置界面,在 Ubuntu 下会因为快捷键冲突无法使用 系统快捷键 打开系统设置中的快捷键设置,按 Backspace 键禁用 Fcitx 如果你的输入 ...