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 type="text" v-model="title" @keyup.enter="add" /> |
| <ul> |
| |
| <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> |
| |
| <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: { |
| |
| list: [{ |
| id: 1, |
| name: "吃饭饭" |
| }, { |
| id: 2, |
| name: "睡觉觉" |
| }, { |
| id: 3, |
| name: " 做作业" |
| }], |
| title: '', |
| }, |
| methods: { |
| |
| add() { |
| |
| |
| |
| if (this.title.trim() == '') return alert('请输入一定内容') |
| |
| this.list.unshift({ |
| id: Date.now(), |
| name: this.title, |
| |
| }) |
| |
| this.title = '' |
| }, |
| |
| }, |
| }) |
| </script> |
| </body> |
