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继承的实现
Oct 24 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
vue实现按需加载组件及异步组件功能
May 27 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
详解ES6中class的实现原理
Oct 03 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
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
js实现拖拽功能
2017/03/01 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
了解ESlint和其相关操作小结
2018/05/21 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
Python Subprocess模块原理及实例
2019/08/26 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
学生请假条格式
2014/04/11 职场文书
网络技术专业求职信
2014/05/02 职场文书
招商引资工作汇报
2014/10/28 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
交通事故被告答辩状
2015/05/22 职场文书
单位证明范文
2015/06/18 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书