Vue demo：记事本

最新推荐文章于 2024-09-30 14:28:41 发布

TraceurZzl

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量93

点赞数

分类专栏： (HM)Vue 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_49956121/article/details/120606593

版权

(HM)Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文将介绍如何使用Vue.js构建一个简单的记事本应用。通过结合JavaScript和HTML，我们将实现添加、编辑和删除笔记的功能，展示Vue.js在动态数据绑定和组件化方面的优势。

摘要由CSDN通过智能技术生成

记事本：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div align="center">
			<h2>欢迎使用xxx记事本</h2>
		</div>
		<div id="app" align="center">
			<input type="text" v-model="inputValue" value="请输入内容" />
			<input type="button" value="添加" @click="addNote"/>
			<table style="border: 1px solid darkgray;height: auto;width: 219px;">
				<tr v-for="(item,index) in noteList">
					<td>
						<span style="font-size: 2px;">{{ ++index }}、{{ item }}</span>
						<span style="float: right;font-size: 2px;" @click="removeNote(index)"/>
							删除
						</span>
					</td>
				</tr>
			</table >
			<div style="font-size: 2px;">
				<span>内容数目：{{ noteList.length }}</span>
				<span style="margin-left: 100px;" @click="clearNote">
					清空
				</span>
			</div>
		</div>
		
		<!-- 导入开发版本的Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					noteList:[],
					inputValue:"请输入内容"
				},
				methods:{
					addNote:function(){
						this.noteList.push(this.inputValue);
						this.inputValue = "请输入内容";
					},
					removeNote:function(index){
						this.noteList.splice(index,1);
					},
					clearNote:function(){
						this.noteList.splice(0,this.noteList.length);
					}
				}
			})
		</script>
	</body>
</html>