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 相关文章推荐
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
vue实现滑动解锁功能
Mar 03 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动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
js获取Get值的方法
2016/09/29 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
python itchat实现微信自动回复的示例代码
2017/08/14 Python
用python制作游戏外挂
2018/01/04 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
python实现桌面气泡提示功能
2019/07/29 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
绿色城市实施方案
2014/03/19 职场文书
学校师德承诺书
2014/05/23 职场文书
股权转让协议书
2014/12/07 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
庆七一主持词
2015/06/29 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
什么是Python装饰器?如何定义和使用?
2022/04/11 Python