css
#app {
text-align: center;
background: #fbebd4;
width: 480px;
max-height: 400px;
box-sizing: border-box;
padding-top: 50px;
border-radius: 5px;
position: relative;
}
#app h2 {
margin: 0;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
color: #6a4d52;
font-size: 30px;
}
#app .main {
max-height: 300px;
width: 454px;
margin: 5px auto 0;
transform: translateX(1px);
}
#app ul {
padding: 0;
max-height: 200px;
overflow-y: scroll;
margin-bottom: 0;
}
#app ul::-webkit-scrollbar {
width: 0 !important;
}
#app li {
list-style: none;
border-bottom: 1px solid #6a4d52;
text-align: left;
box-sizing: border-box;
cursor: pointer;
font-size: 25px;
color: #8895a8;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 40px;
}
#app li:hover {
background-color: #fcfaed;
}
#app li span {
color: #6a4d52;
}
#app button {
cursor: pointer;
border: none;
background-color: transparent;
}
#app input {
height: 30px;
font-size: 20px;
appearance: none;
outline: none;
border: none;
padding-left: 5px;
box-sizing: border-box;
border-radius: 5px;
color: #6a4d52;
}
#app .bottom {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
padding: 0 14px;
}
#app .bottom span {
color: #929093;
}
#app .bottom span:last-child {
cursor: pointer;
color: #935256;
}
#app p {
color: #929093;
font-size: 20px;
margin: 0;
padding: 0;
}
js
<!--
【思路一:列表渲染】
步骤一:因为列表要显示多条，所以定义一个数组把多条数据存起来。
步骤二:然后再对着li进行v-for,根据这个数组来渲染。
步骤三:使用插值语法,更改需要渲染的标题、序号。
【思路二:数据新增】
步骤四:需要拿到输入框的内容,在input输入框中使用v-model双向绑定,绑定的元素需要在data中定义。
步骤五:因为按回车就添加，意为着输入框要加事件keyup，并且只能由enter键触发。
步骤六:按回车不能直接添加到数组里,因为可能没有输入内容,所以要做一个非空判断。
步骤七:不为空,则添加到数组中。
步骤八:添加到数组后,就把输入框内容清除。(这时候可以把步骤一定义的数组死数据删掉,让列表数据展示我们输入的内容)
步骤九:完善“空空如也”显示。
【思路三:数据删除】
步骤十:给“删除按钮”添加点击事件。
步骤十一:给“清空按钮”添加点击事件,设置点击时将数组全部重新赋值为空数组,则数据全部清空。
【思路四:数据统计】
步骤十二:统计合计,就是统计数组的长度。
-->
<body>
<div id="app">
<h2>记事本</h2>
<div class="main">
<!-- 四：给input表单添加v-model双向绑定语法 -->
<!-- 五：添加回车点击事件add -->
<input type="text" v-model="title" @keyup.enter="add" />
<ul>
<!--二： 在li标签内用v-for语法搭配key对list渲染初始数据 -->
<li v-for="(item,index) in list " :key="item.id">
<!-- 三：使用差值语法，更改需要绚烂的标题，序号 -->
<div class="content"><span>{{index+1}}.</span>{{item.name}}</div>
<!-- 十：给删除按钮添加点击事件 -->
<button @click="list.splice(index,1)">❌</button>
</li>
</ul>
<!-- 九：完善空空如也显示与隐藏 -->
<p class="empty" v-show="list.length == 0">空空如也...</p>
</div>
<div class="bottom">
<!-- 十二：将合计的默认数量改成数组长度 -->
<span>合计:{{list.length}}</span>
<!-- 十一：给清空按钮添加点击事件使点击后会清空list内容 -->
<span @click="list =[]">清空</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
//一：在data中声明一个数组用于绚烂的初始数据
list: [{
id: 1,
name: "吃饭饭"
}, {
id: 2,
name: "睡觉觉"
}, {
id: 3,
name: " 做作业"
}],
title: '',
},
methods: {
add() {
// 六：如果输入为空就不往下执行，并且弹出提示框。
// 【v-model的trim修饰符】
// 作用:获取到输入框值时,可以自动帮你去除首尾空格语法:v-model.trim ="数据"
if (this.title.trim() == '') return alert('请输入一定内容')
// 七:把输入的内容添加到数组中最后一项
this.list.unshift({
id: Date.now(),
name: this.title,
})
// 八：把数据添加到列表后，把输入框内容清空。
this.title = ''
},
},
})
</script>
</body>
