样式就不写了哈~
直接上代码
↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 引入vue.js -->
</head>
<body>
<div id="ssl">
<input type="text" v-model="title" placeholder="请输入您要输入的信息" @keyup.enter="add()">
<!-- 先写一个输入框 v-model绑定一下 然后在给他绑定一个键盘事件回车 -->
<ul>
<li v-for="(e,i) in list" :key="i"><!-- 渲染数据 -->
{{e.title}}
<span>
<button @click="del(i)">删除</button>
<!-- 删除数据 -->
</span>
</li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#ssl",
data:{
title:"",//v-model绑定的变量
list:[]//定义一个空数组
},
methods:{//在methods里面写方法
add()
{
if(this.title=="")//判断一下如果输入框的值为空则提示
{
alert("输入的内容不能为空");
}
else//如果不为空
{
let obj={title:this.title};//声明一个obj用来接收输入框输入的值
this.list.push(obj);//添加进数组里面
if(this.list.length>10)//如果输入的数据超过十条 则最后输入的替换前面的数据第一条
{
this.list.shift();
}
this.title="";//按下回车过后清空输入框输入的内容
}
},
del(i)//删除数据
{
this.list.splice(i,1);//原生js根据传过来的下标来截取
}
}
})
</script>
</html>