备忘录

用Vue实现备忘录功能。

程序分析：
1.显示时间
2.添加内容
3.删除内容
4.修改内容
5.双向绑定

效果演示

初始样式
在这里插入图片描述
点击修改显示内容出现在输入框中

修改之后点击完成

点击删除

看了上述效果有没有心动的感觉呢？？？

在程序开始之前请注意：
引入Vue.js架包

代码演示

1.body内容

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue.js"></script><script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script><link rel="stylesheet" href="css/style.css" /></head><body><div id="app"><!-- 头部内容（位于最上面的内容） --><header><h1>备忘录<span class="right">{{nowTime}}</span></h1></header><section><!--双向绑定  输入文本内容--><textarea v-model="diary" style="width: 100%;height: 200px;" placeholder="每天都要记的来找我呦！！！"></textarea><button @click="finished" class="finish">完成</button></section><ul><li v-for="(nb,i) in noteBooks"><!--双向绑定  显示文本内容--><p v-html="nb.text">每天都要记的来找我呦！！！</p><div class="btn_ground"><button @click="del" type="button" class="del left">删除</button><!-- 时间显示--><span class="time" v-text="nb.time"></span><button @click="upDate(i)" type="button" class="update right">修改</button></div></li></ul></div><footer>著作人 zsh</footer></body><script src="js/time.js" type="text/javascript" charset="UTF-8"></script>
</html>

2.CSS样式

*{margin: 0;padding:0;}header,#app,footer{margin:0 8px;}header h1{color: #F92672;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;}#app section{position: relative;}.finish{position: absolute;background-color: #A6E22E;width: 90px;height: 30px;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;text-align: center;font-size: 8px;}.del{width: 50px;background-color: #AE81FF;color: #FFFFFF;}.update{width: 50px;background-color: #AE81FF;color: #FFFFFF;}footer{color: #999;text-align: center;font-size: 12px;}

3.Vue内容

function getNowString() {//时间函数和数组var now = new Date()var arr = ['日', '一', '二', '三', '四', '五', '六']return now.toLocaleDateString() +'星期' +arr[now.getDay()]}var App = new Vue({el: '#app',data: {nowTime: getNowString(),noteBooks: [{time: '2019/11/15 星期五',text: '今天出现了好长时间都没看到的太阳公公。'}, {time: '2019/11/23 星期六',text: '今天我们一起去月季园'}],diary: '',index: '-1'},methods: {finished: function() {//!App.diary是考虑App.diary=null的情况if (!App.diary || 0 == App.diary.length) returnif (-1 == App.index) {//存入noteBooks中//unshift插入到数组首位App.noteBooks.unshift({time: App.now,text: App.diary})} else {//修改App.noteBooks[App.index] = {time: App.now,text: 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.textApp.now = nb.time//App.index 为-1表示新增,其他就是修改App.index = i}}})