1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>小清单</title>
  6.     <link rel="stylesheet" href="../bootstrap/bootstrap/css/bootstrap.min.css">
  7.     <style>
  8.         /*修饰完成事件样式*/
  9.         .doneIcon {
  10.             color: green;
  11.         }
  13.         .doneText {
  14.             text-decoration: line-through;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. 	<script src="../vue/vue.js"></script>
  20.     <div class="container">
  21.         <div class="row">
  22.             <div class="col-sm-6 col-sm-offset-3">
  23.                 <div class="panel panel-default" style="margin-top: 80px">
  24.                     <div class="panel-heading" style="background-color: rgba(37,176,211,0.26)">
  25.                         <h3 class="panel-title">小清单</h3>
  26.                     </div>
  28.                     <div class="panel-body" id="app">
  29.                         <!--通过form中默认回车提交,但还需要清除掉form的默认的提交事件;调用自定义的addThing事件-->
  30.                         <form action="" v-on:submit.prevent="addThing">
  32.                             <div class="input-group col-sm-6 col-sm-offset-3">
  34.                                 <input type="text" class="form-control" placeholder="请输入待办事件" v-model="inputThing.title">
  35.                                 <span class="input-group-btn">
  36.                                 <button class="btn btn-default" type="button" v-on:click="addThing"><span
  37.                                         class="glyphicon glyphicon-plus"></span></button>
  38.                         </span>
  39.                             </div><!-- /input-group -->
  40.                         </form>
  42.                         <hr>
  43.                         <ul class="list-group">
  44.                             <li class="list-group-item" v-for="(item, index) in things" v-bind:key="index"
  45.                                 v-on:click="done(index)">
  46.                                 <span class="glyphicon glyphicon-ok-sign" v-bind:class="{doneIcon:item.status}"></span>
  47.                                 <span v-bind:class="{doneText:item.status}">{{ item.title }}</span>
  48.                                 <span class="glyphicon glyphicon-remove-sign pull-right"
  49.                                       v-on:click="delThing(index)"></span>
  50.                             </li>
  52.                         </ul>
  53.                     </div>
  54.                 </div>
  55.             </div>
  56.         </div>
  57.     </div>
  58. 	<script>
  59.     let app = new Vue({
  60.         el: '#app',
  61.         data: {
  62.             // 根据设置的status来为完成事件添加样式
  63.             things: [
  64.                 {'title': '吃饭', 'status': false},
  65.                 {'title': '睡觉', 'status': false},
  66.                 {'title': '打豆豆', 'status': false},
  67.             ],
  68.             inputThing: {'title': '', 'status': false},
  69.         },
  70.         methods: {
  71.             addThing() {
  72.                 // 如果输入为空或空格(trim)return
  73.                 if (this.inputThing.title.trim() === '') {
  74.                     return
  75.                 }
  76.                 this.things.push(this.inputThing);
  77.                 this.inputThing={'title': '', 'status': false}
  78.             },
  79.             // 根据索引删除数组中的数据splice(元素索引,删除几个)=>1,则删除当前元素;不写则删除当前元素及后面的所有
  80.             delThing(index) {
  81.                 this.things.splice(index, 1)
  82.             },
  83.             done(index) {
  84.                 this.things[index].status = true;
  85.             }
  86.         }
  87.     })
  88. 	</script>
  89. </body>
  90. </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. python-初始网络编程

     一.服务端和客户端 BS架构 (腾讯通软件:server+client) CS架构 (web网站) C/S架构与socket的关系: 我们学习socket就是为了完成C/S架构的开发 二.OSI七层 ...

  2. ubuntu 或centos 使用Docker搭建anaconda+python基本环境

    ubuntu 16 使用Docker安装anacondaubuntu docker 安装centos docker 安装搜索可用镜像 docker search anaconda 拉取你中意的镜像 d ...

  3. mysql语法总结及例子

    1. DDL相关 a. -- 查询所有数据库 show databases;-- 删除数据库drop database ladeng; b. -- use `数据库名称`; 表示使用此数据库 use ...

  4. Educational Codeforces Round 74 (Rated for Div. 2)

    传送门 A. Prime Subtraction 判断一下是否相差为\(1\)即可. B. Kill 'Em All 随便搞搞. C. Standard Free2play 题意: 现在有一个高度为\ ...

  5. CookieJar转换成不同的数据格式

  6. C#位运算实际作用之操作整型某一位

    1.前言 前几天写了两篇关于c#位运算的文章 c#位运算基本概念与计算过程 C#位运算实际运用 在文中也提到了位运算的实际作用之一就是合并整型,当时引用了一个问题: C# 用两个short,一个int ...

  7. COM 编程基础

    DirectX 采用了 COM 标准.而 DirectShow 是一套完全基于 COM 的应用系统.要想深入学习 DirectShow,掌握一些 COM 编程的基础知识是必不可少的. 一.COM 是什 ...

  8. iOS：捋一遍View的生命周期

    一.介绍 前面介绍了VC的生命周期,闲着没事也来捋一捋View的生命周期,简单用两个类型的View来监测.一个View纯代码创建,另一个View使用Xib创建. 二 .代码 MyCodeView:  ...

  9. 《细说PHP》第四版 样章 第23章 自定义PHP接口规范 5

    23.3  接口的安全控制规范 23.2节的示例实现了一个简单接口,但是这个接口此时是在“裸奔”的.因为这个接口所有人都可以请求,不仅我们的客户端可以正常访问数据,如果有人使用如fiddler.wir ...

  10. java循环定时器@Scheduled的使用

    @Scheduled 注解 用于定时循环执行任务 例如: @Scheduled(cron="0 */10 * * * ?") 表示每隔十分钟执行一次 每隔5秒执行一次:" ...