Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to realize notepad with vue". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to realize notepad with vue".

Code:

Document is deleting {{ongoing.length}} {{item.title}} Completed {{done.length}} {{item.title}} deletion of Copyright ©2021 todolist.cn new Vue ({el: "# app" Data: {id: 4, / / Storage the information entered by the user thing: "", / * list in progress * / ongoing: [{id: 1, title: "eating"} {id: 2, title: "sleep"}], / / completed list done: [{id: 3, title: "playing Doudou"}]} Methods: {/ / add to to-do add () {/ / assemble an object Add objects to the ongoing array. Let obj = {id: this.id, title: this.thing}; / / New objects are generated, and id is added to prevent id repetition. This.id++; / * add the acquired value to to-do * / this.ongoing.push (obj); / / if you set the value of thing to null, the input box will automatically empty this.thing = "". }, / / add to completed addToDone (index) {/ / remove clicked data from ongoing, add to Done / / splice (index,1) start with index, delete an element. Splice returns an array of deleted elements. This.done.push (this.ongoing.splice (index, 1) [0])}, / * add to * / addToGoing (index) {this.ongoing.push (this.done.splice (index, 1) [0])} / * remove * / delGoing (index) {this.ongoing.splice (index, 1)} from in progress, / * remove * / delDone (index) {this.done.splice (index) from completed 1)})

Style part

Body {margin: 0; padding: 0; font-size: 16px; background: # CDCDCD;} header {height: 50px; background: # 333; background: rgba (47,47,47,0.98);} section {margin: 0 auto;} label {float: left; width: 100px; line-height: 50px; color: # DDD; font-size: 24px; cursor: pointer; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif } header input {float: right; width: 60%; height: 24px; margin-top: 12px; text-indent: 10px; border-radius: 5px; box-shadow: 0 1px 0 rgba (255,255,255,0.24), 0 1px 6px rgba (0,0,0,0.45) inset; border: none} input:focus {outline-width: 0} h3 {position: relative;} span {position: absolute; top; right: 5px; display: inline-block Padding: 05px; height: 20px; border-radius: 20px; background: # E6E6FA; line-height: 22px; text-align: center; color: # 666; font-size: 14px;} ol,ul {padding: 0; list-style: none;} li input {position: absolute; top: 2px; left: 10px; width: 22px; height: 22px; cursor: pointer;} p {margin: 0;} li p input {top: 3px; left: 40px Width: 70%; height: 20px; line-height: 14px; text-indent: 5px; font-size: 14px;} li {height: 32px; line-height: 32px; background: # fff; position: relative; margin-bottom: 10px; padding: 045px; border-radius: 3px; border-left: 5px solid # 629A9C; box-shadow: 0 1px 2px rgba (0,0,0,0.07);} ol li {cursor: move } ul li {border-left: 5px solid # 999; opacity: 0.5;} li a {position: absolute; top: 2px; right: 5px; display: inline-block; width: 14px; height: 12px; border-radius: 14px; border: 6px double # FFF; background: # CCC; line-height: 14px; text-align: center; color: # FFF; font-weight: bold; font-size: 14px; cursor: pointer;} li button {position: absolute Right: 10px; top: 50%; transform: translateY (- 50%);} footer {color: # 666; font-size: 14px; text-align: center;} @ media screen and (max-device-width: 620px) {section {width: 96%; padding: 0.2%;} @ media screen and (min-width: 620px) {section {width: 600px; padding: 010px;}}

At this point, I believe you have a deeper understanding of "how to achieve notepad in vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.