Vue.js实现备忘录功能


Posted in Javascript onJune 26, 2019

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

效果展示:

Vue.js实现备忘录功能

html代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <!-- 移动设备设置 -->
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
 <title>记事本</title>
 <link rel="stylesheet" type="text/css" href="css/noteUI.css" >
 <!-- vue核心框架 -->
 <script src="vue/vue.js" type="text/javascript" charset="UTF-8"></script>
 <script src="vue/vue-resource.min.js" type="text/javascript" charset="UTF-8"></script>
 </head>
 <body>
 
 <div id="app">
 <!-- 一般用于头部 -->
 <header>
 <h1>备忘录<span class="right">{{now}}</span></h1>
 </header>
 <section>
 <!-- 多行文本 -->
 <!-- 视图传数据 -->
 <!-- v-model="diary"双向数据绑定 -->
 <textarea v-model="diary" style="width: 100%;height: 200px;" placeholder="写日记是一个好习惯">
 </textarea>
 <!-- @click='finished'绑定methods属性中的方法 -->
 <button @click="finished" class="finish">完成</button>
 </section>
 <ul>
 <!-- 循环遍历data中的noteooks属性B,每次循环都赋值给nb -->
 <!-- v-for="(数组值,数组下标) in noteBooks"-->
 <li v-for="(nb,i) in noteBooks">
  <!--nb.txt类似对象访问-->
  <!-- v-html="nb.txt"绑定html代码 -->
  <p v-html="nb.txt">写日记是一个好习惯</p>
  <div class="btn_ground">
  <button @click="del" type="button" class="del left">删除</button>
  <!-- v-text="nb.time" 绑定文本等价于 {{nb.time}}-->
  <span class="time" v-text="nb.time"></span>
  <button @click="upDate(i)" type="button" class="update right">修改</button>
  </div>
 </li>
 </ul>
 </div>
 <footer>
 版权所有 zk
 </footer>
 <script src="noteBook.js" type="text/javascript" charset="UTF-8"></script>
 
 </body>
</html>

CSS代码:

*{
 margin: 0;
 padding:0;
}
header,#app,footer{
 margin:0 8px;
}
header h1{
 color: #FF4500;
 font-weight: normal;
 font-size: 24px;
 padding-top: 10px;
 padding-bottom: 4px;
 border-bottom: 1px solid #ccc;
 margin-bottom: 4px;
}
 
#app textarea{
 width: 100%;
 height: 200px;
 border: none;
 border-bottom: 1px solid #ccc;
 padding: 8px 4px;
}
button{
 padding: 4px;
 background-color: #fff;
 border: 1px solid #ccc;
 border-radius: 4px;
}
/* position: relative;没有脱离正常流 */
/* relitive相对于自己在流中的元素定位 */
/* relative一般用于位置微调,或者让absolute参考自己定位 */
#app section{
 position: relative;
 
}
.finish{
 position: absolute;
 background-color: limegreen;
 bottom: 8px;
 right: 4px;
}
#app ul{
 margin-top: 8px;
}
#app li{
 border-bottom: 1px solid #CCCCCC;
 margin-bottom: 8px;
}
.left{
 float: left;
}
.right{
 float: right;
}
/* 组合选择器 */
 
header span.right{
 font-size: 14px;
 padding-top:13px;
}
.btn_ground{
 height: 30px;
 margin-top: 4px;
}
.del{
 background-color: orangered;
 color: #FFFFFF;
}
.update{
 background-color: royalblue;
 color: #FFFFFF;
}
footer{
 color: #999;
 text-align: center;
 font-size: 12px;
}

js代码:

function getNowString(){
 var now=new Date()
 var arr=['日','一','二','三','四','五','六']
 
 return now.toLocaleDateString()
  +'星期'
 +arr[now.getDay()]
}
 
var App = new Vue({
 el:'#app',
 data:{
 now:getNowString(),
 noteBooks:[
 {
 time:'2019/6/17 星期一',
 txt:'今天天气不好'
 },{
 time:'2019/6/18 星期二',
 txt:'今天学习<i style="color:red">Adidas'
 }
 ],
 diary:'',
 index:'-1'
 },
 methods:{
 finished:function(){
 //!App.diary是考虑App.diary=null的情况
 if(!App.diary||0==App.diary.length)return
 
 if(-1==App.index){
 //存入noteBooks中
 //unshift插入到数组首位
 App.noteBooks.unshift({
  time:App.now,
  txt:App.diary
 })
 }else{
 //修改
 App.noteBooks[App.index]={
  time:App.now,
  txt:App.diary
 }
 App.index=-1
 }
 App.diary = ''
 App.now=getNowString()
 },
 del:function(i){
 // 删除 splice(起始下标,删除个数)
 App.noteBooks.splice(i,1)
 },
 upDate:function(i){
 var nb=App.noteBooks[i]
 App.diary=nb.txt
 App.now = nb.time
 //App.index 为-1表示新增,其他就是修改
 App.index=i
 }
 }
})

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

Javascript 相关文章推荐
javascript 常用关键字列表集合
Dec 04 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 #Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 #Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 #Javascript
js+html实现周岁年龄计算器
Jun 25 #Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 #Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 #Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 #Javascript
You might like
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
php adodb操作mysql数据库
2009/03/19 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
js opener的使用详解
2014/01/11 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
python中assert用法实例分析
2015/04/30 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
python非递归全排列实现方法
2017/04/10 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
python的链表基础知识点
2020/09/13 Python
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
简述数组与指针的区别
2014/01/02 面试题
环境科学专业个人求职的自我评价
2013/11/28 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
店面销售职位的职责
2014/03/09 职场文书
八项规定整改方案
2014/10/01 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL