vue-综合应用-记事本

最新推荐文章于 2023-04-11 17:35:02 发布

HPF_99

最新推荐文章于 2023-04-11 17:35:02 发布

阅读量115

点赞数

分类专栏：前端文章标签： vue js javascript

本文链接：https://blog.csdn.net/hpf_99/article/details/112596146

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

改综合应用的需求：
1.实现回车添加数组元素
2.点击按钮删除
3.显示内容条数及长度
4.删除所有
5.当数组个数为0时不显示最下面当前个数和删除所有那一行

push：添加元素
splice：删除元素（开始下标，删除个数）
@ == v-on （简写）
v-for ：for循环，(i，index)=>循环元素与下标
@keyup.enter ：按下回车键
v-model=“input_value” ：与input——value动态绑定，实时变化
v-show：值为true显示，否则不显示（改变display的属性值为none）
v-if：值为true显示，否则不显示（直接删除元素）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>综合应用-记事本</title>
	</head>
	<body>
		<div id="all" style="margin-left: 200px;">
			<h1>记事本</h1>
			<input type="text" placeholder="请输入" v-model="input_value"
			 	@keyup.enter="add" style="width: 250px;"/>
			<ul>
				<table>
					<tr v-for="(i,index) in list">
					<td><label style="margin-right: 20px;">{{index+1}}</label></td>
					<td>{{i}}</td>
					<td><button style="margin-left: 30px; " @click="del(index)">X</button></td>
					</tr>
				</table>
			</ul>
			<div>
				<label style="margin-right: 30px;"  v-show="list.length">当前个数：{{list.length}}</label> 
				<button @click="remove" v-if="list.length">删除所有</button>
			</div>
		</div>
		<script src="js/vue.js"></script>
		<script>
			var all = new Vue({
				el:"#all",
				data:{
					list:["广州","揭阳","惠来"],
					input_value: "广东"
				},
				methods:{
					add:function(){
						this.list.push(this.input_value);
					},
					del:function(index){
						this.list.splice(index,1);
					},
					remove:function(){
						this.list = [];
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

HPF_99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-综合应用-记事本

改综合应用的需求：1.实现回车添加数组元素2.点击按钮删除3.显示内容条数及长度4.删除所有5.当数组个数为0时不显示最下面当前个数和删除所有那一行push：添加元素splice：删除元素（开始下标，删除个数）@ == v-on （简写）v-for ：for循环，(i，index)=>循环元素与下标@keyup.enter ：按下回车键v-model=“input_value” ：与input——value动态绑定，实时变化v-show：值为true显示，否则不显示（改变d
复制链接

扫一扫