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

效果展示：

超文本标记语言代码：

！DOCTYPE html html head meta charset=' utf-8 '！-移动设备设置-meta name=' viewport ' content=' width=设备宽度，初始比例=1，最小比例=1，最大比例=1，用户比例=无' title记事本/title link rel='样式表type=' text/CSS ' href=' CSS/note ui。CSS '！- vue核心框架-script src=' http : vue/vue。js ' type=' text/JavaScript ' charset=' UTF-8 '/script script src=' http : vue/vue-resource。量滴js ' type=' text/JavaScript ' charset=' UTF-8 '/script/head body div id=' app '！-一般用于头部-标题氕备忘录span class=' right " { now } }/span/h1/header section！-多行文本- !-视图传数据- !- v-model='日记'双向数据绑定-文本区域v-model=' diary ' style=' width : 100%；'高度： 200像素占位符='写日记是一个好习惯/textarea！- @click='完成'绑定方法属性中的方法-button @ click=' finished ' class=' finish '完成/按钮/ul部分！-循环遍历数据中的笔记本属性b，每次循环都赋值给nb -！- v-for='(数组值，数组下标)in NOtes '-Li v-for='(nb，I)in NOtes '！- nb.txt类似对象访问- !- v-html='nb.txt '绑定超文本标记语言代码- p v-html='nb.txt '写日记是一个好习惯/p div class='btn_ground '按钮@ 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页脚版权所有ZK/页脚脚本src=' http :笔记本。js ' type=' text/JavaScript ' charset=' UTF-8 '/脚本/body/htmlCSS代码：

* { margin : 0；划水：0;}页眉，#app，页脚{ margin:0 8px}表头h1 { color : # ff 4500 font-weight :正常；font-size : 24px衬垫-top : 10px；填充-底部： 4px边框-底部： 1px实心# ccc保证金-底部： 4px} # app文字区{宽度： 100%；高度： 200像素；border:无；边框-底部： 1px实心# cccpadding: 8px 4px}按钮{ padding: 4px背景-color : # fff；border: 1px固体# cccborder-radius : 4px；}/*位置：相对；没有脱离正常流*//*续相对于自己在流中的元素定位*//*相对一般用于位置微调，或者让绝对的参考自己定位*/# app节{位置：相对；}.完成{位置：绝对值；背景色：石灰绿；bottom : 8pxright : 4px } # app ul { margin-top : 8px；} # app Li {边框-底部： 1px实心# CCCCCC；边距-底部： 8px}.左{左侧浮动： }。右{右侧浮动： }/*组合选择器*/标题跨度。右{ font-size : 14px填充-top :13 px；}.btn _ ground { height: 30px保证金-top : 4px；}.del{背景-颜色：橙色；color: # FFFFFF}。更新{底色：皇家蓝；color: # FFFFFF}页脚{ color: # 999文本对齐：中心；font-size : 12px}js代码：

函数getNowString(){ var now=new Date()(var arr=['日','一','二','三','四','五','六]立即返回。' toLocaleDateString()'星期现在。getday()]} var App=new Vue({ El : ' # App '，data:{ now:getNowString())，笔记本：[{ time : ' 2019/6/17星期一，txt: '今天天气不好}，{ time:'2019/6/18星期二，txt: '今天学习I style=' color : red ' adidas ' }]，diary: ' '，index:'-1' }，methods : { finished : function(){//！App。日记是考虑App.diary=null的情况if(！App.diary||0==App.diary.length)返回if(-1==App.index){ //存入笔记本电脑中//unshift插入到数组首位app。笔记本。unshift({ time : app。现在，txt:App.diary }) }else{ //修改app。笔记本[app。index]={ time : app。现在，txt : app。乳品}应用。index=-1 } app。dairy=' ' app。now=getNowString()}，del:function(i){ //删除拼接（起始下标，删除个数)App.noteBooks.splice(i，1) }，更新：函数(I){ var nb=app。笔记本[我]app。日记=nb。txt应用。now=nb。时间//app。指数为-1表示新增，其他就是修改App.index=i } }})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。