备忘录

最新推荐文章于 2024-03-18 17:52:42 发布

风叶翩翩

最新推荐文章于 2024-03-18 17:52:42 发布

阅读量156

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45743799/article/details/103294719

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

用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) return
	
					if (-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.text
					App.now = nb.time
					//App.index 为-1表示新增,其他就是修改
					App.index = i
				}
			}
		})

看到这里已经结束，相信你已经对此程序有深刻的了解。

了解更多关注我呦！！！

风叶翩翩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
备忘录

用Vue实现备忘录功能。程序分析：1.显示时间2.添加内容3.删除内容4.修改内容5.双向绑定效果演示初始样式点击修改显示内容出现在输入框中修改之后点击完成点击删除看了上述效果有没有心动的感觉呢？？？在程序开始之前请注意：引入Vue.js架包代码演示1.body内容<!DOCTYPE html><html> <head&g...
复制链接

扫一扫

专栏目录