vue.js实现备忘录demo


Posted in Javascript onJune 26, 2019

本文实例为大家分享了vue.js实现备忘录demo的具体代码,供大家参考,具体内容如下

vue.js实现备忘录demo

代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="vue.js"></script>
  <style>
    /*当任务完成时,勾选多选框后的样式*/
    .finish{
      text-decoration:line-through;
      color:#aaabac;
    }
  </style>
</head>
<body>
<div id="app">
  <!--输入框:v-model用于将输入内容跟content进行数据绑定,keydown.enter用于监听键盘回车事件-->
  <input type="text" v-model="task.content" placeholder="edit" @keydown.enter="addTask">
  <!--任务列表显示区域-->
  <div id="list">
    <!--用v-if判断当前是否有任务,任务数组list长度为0时显示暂无任务-->
    <p v-if="list.length===0" style="position:relative;left:20px;top:20px;color:#AAAAAA">暂无任务</p>
    <!--用v-for遍历输出任务数组中的任务-->
    <div id="unit" v-for="(item,index) in list" >
      <!--多选框的click事件监听状态(是否勾选)的改变-->
      <input type="checkbox" @click="changeState(index)" >
      <!--动态添加样式class='finish'-->
      <span :class="{'finish':item.finished}">{{ index+1 }}.{{ item.content }}</span>
      <!--删除按钮:点击按钮执行deleteTak函数,需要注意要传入索引值删除指定任务-->
      <button style="background:red;color:white;" @click="deleteTask(index)">delete</button>
    </div>
  </div>
</div>
 
</body>
<script>
  let vm=new Vue({
    el:"#app",
    data:{
      task:{
        content:'',
        finished:false,
        // deleted:false,
      },
 
      list:[],
 
      addTask(){
        this.list.push(this.task);
        this.task={
          content:'',
          finished:false,
          // deleted:false,
        }
      },
 
      changeState(index){
        let nowState=this.list[index].finished;
        this.list[index].finished=!this.list[index].finished;
      },
 
      deleteTask(index){
        this.list.splice(index,1);
      }
    },
  });
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript入门·对象属性方法大总结
Oct 01 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
Vue.js学习示例分享
Feb 05 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
ES6 Map结构的应用实例分析
Jun 26 #Javascript
vue实现日历备忘录功能
Sep 24 #Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 #Javascript
Vue.js实现备忘录功能
Jun 26 #Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 #Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 #Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 #Javascript
You might like
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
python迭代器实例简析
2014/09/25 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
几个人围成一圈的问题
2013/09/26 面试题
如何理解transaction事务的概念
2015/05/27 面试题
浙大毕业生自荐信
2014/01/26 职场文书
不假外出检讨书
2014/01/27 职场文书
简历的自我评价
2014/02/03 职场文书
体育专业求职信
2014/07/16 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
简历自荐信范文
2015/03/09 职场文书
区域销售大会开幕词
2016/03/04 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技