vue记事本

最新推荐文章于 2024-07-14 22:02:46 发布

yfy538

最新推荐文章于 2024-07-14 22:02:46 发布

阅读量93

点赞数

分类专栏：案例文章标签： vue

本文链接：https://blog.youkuaiyun.com/yfy538/article/details/114645172

版权

案例专栏收录该内容

5 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
*{
	padding:0;
	margin:0;
	border:0;
	color: #666A6D;
	font-size:14px;
	list-style: none;
	box-sizing: border-box;
}
html,body{
	width: 100%;
	height: 100%;
}
.box{
	width: 350px;
	margin:10px auto;
	box-shadow: 0px 2px  3px #ccc;
}
input,
ul li,
.fooder{
	width: 350px;
	height: 35px;
	border: 1px solid #ccc;
	padding: 0 10px;
	line-height: 35px;
}
.centent_left{
	margin-right: 10px;
}
.centent_right{
	color: red;
	display: none;
	float: right;
	cursor: pointer;
}
li:hover .centent_right{
	display: block;
}
ul li,
.fooder{
	display: block;
	border-top:none;
}
.fooder{
	font-size: 14px;
}
.fooder_left,
.fooder_right{
	font-size: 12px;
	cursor: pointer;
}
.fooder_left{
	float: left;
}
.fooder_right{
	float: right;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div class="box" id="box">
	<input type="text" @keyup.enter="add" v-model="inputValue"/>
	<div class="centent">
		<ul>
			 <li v-for="(item,index) in list">
			 <span class="centent_left">{{index+1}}</span>
			 {{item}}
			 <span class="centent_right" @click="remove">x</span>
			 </li>
		</ul>
	</div>
	<div class="fooder" v-show="list.length!=0">
		<span class="fooder_left">剩余{{list.length}}个</span>
		<span class="fooder_right" @click="allremove">全部清除</span>
	</div>
</div>
<script>
var vm = new Vue({
	el:"#box",
	data:{
		list:[],
		inputValue:"",
	},
	methods:{
		add:function(){
			if(this.inputValue!=""){
				this.list.push(this.inputValue),
				this.index ++;
				this.inputValue="";
			}
		},
		remove:function(index){
			this.list.splice(index,1)
		},
		allremove:function(){
			this.list="";
		}
	}
})
</script>
</body>
</html>