Vue implements local storage add, delete and modify functions

Vue implements local storage add, delete and modify functions

This article example shares the specific code of Vue to implement local storage addition, deletion and modification for your reference. The specific content is as follows

Functionality:

The input is added to the ongoing list.

Double-click to modify the function.

Click the Esc key to cancel, or the previous content,

Click Enter to successfully modify.

The modification is successful when the modification frame loses focus.

When the button is selected, it enters the completed list, and when it is not selected, it enters the ongoing list.

Click Delete to delete the row.

The last added files will still be there when you open the local storage next time.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
  *{
   padding: 0;margin: 0;
  }
   ul{
    list-style: none;
   }
   li{
    width: 220px;
    height: 40px;
    border: 1px solid gainsboro;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #6CE26C;
   }
   .del{
    margin-right: 5px;
    border: none;
    width: 20px;
    height: 20px;
    background-color: #008200;
   }
  </style>
 </head>
 <body>
  <div id="app">
   <!-- Filter the leading and trailing spaces in the input content-->
   <!-- Enter event -->
   <input type="text" v-model.trim="temp" @keyup.enter="additem()"/>
   <!-- Get the number of ongoing operations -->
   <h3>In progress{{undolist.length}}</h3>
   <ul class="list">
    <!-- Display the content being traversed -->
    <li class="item" v-for="item in undolist" :key="item.name">
     <div class="">
      <!-- The multiple-select box is in the unchecked false state -->
     <input type="checkbox" v-model="item.done" />
     <!-- The default state is 0. When double-clicked, the state is 1 and the content is assigned to tempEdit-->
     <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
     <!-- The content of the input box is the value of tempEdit. When state=1, the input box is displayed.
     When you click Esc, the state is hidden and the content remains the original value without modification.
     When the state is 0 when pressing Enter, the input box is hidden and the modified tempEdit is assigned to item.name
     When the state is 0 when the focus is lost, the input box is hidden and the modified tempEdit is assigned to item.name
      -->
     <input type="text" v-model="tempEdit" v-show="item.state==1" 
     @keyup.esc="item.state=0;tempEdit=item.name"
     @keyup.enter="item.state=0;item.name=tempEdit"
     @blur="item.state=0;item.name=tempEdit"
     />
     </div>
     <!-- Delete its contents when clicking delete -->
     <button type="button" @click="removeitem(item)" class="del">X</button>
    </li>
   </ul>
   <!-- Completed quantity -->
   <h3>Completed {{doneList.length}}</h3>
   <ul class="list">
    <!-- Traverse and display the completed content-->
    <li class="item" v-for="item in doneList" :key="item.name">
     <div class="">
      <!-- The multiple-select box is in the selected true state -->
     <input type="checkbox" v-model="item.done" />
     <!-- The default state is 0. When double-clicked, the state is 1 and the content is assigned to tempEdit-->
     <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
     <!-- The content of the input box is the value of tempEdit. When state=1, the input box is displayed.
     When you click Esc, the state is hidden and the content remains the original value without modification.
     When the state is 0 when pressing Enter, the input box is hidden and the modified tempEdit is assigned to item.name
     When the state is 0 when the focus is lost, the input box is hidden and the modified tempEdit is assigned to item.name
      -->
     <input type="text" v-model="tempEdit" v-show="item.state==1" 
     @keyup.esc="item.state=0;tempEdit=item.name"
     @keyup.enter="item.state=0;item.name=tempEdit;"
     @blur="item.state=0;item.name=tempEdit;"
     />
     </div>
     <!-- Delete its contents when clicking delete -->
     <button type="button" @click="removeitem(item)" class="del">X</button>
    </li>
   </ul>
  </div>
 </body>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  var vm = new Vue({
   el:"#app",
   data(){
    return {
     // List list // getItem is to obtain local storage data,
     // || "[]" If no array list can be obtained, convert it to an empty array list: JSON.parse(localStorage.getItem("list")|| "[]"),
     // Temporary data storage temp:'',
     // Temporary data storage place for modification box tempEdit:''
    }
   },
   methods:{
    // add additem(){
     // Return when the text box is empty if(this.temp===""){return;}
     // Add to the back this.list.push({
      name:this.temp,
      done:false,
      state:0
     })
     // Clear the temporary box this.temp="";
    },
    // delete removeitem(item){
     // Pop-up box var flag = window.confirm ("Are you sure you want to delete?");
     if(flag){
      // Find the index value of the element that meets the conditions var ind=this.list.findIndex(value=>value.title===item.title);
      // splice deletes one from ind this.list.splice(ind,1);
     }
    }
   },
   computed:{
    // Calculate the completed and unfinished list data by calculating // Unfinished undolist(){
     // filter array function, if the return result is true, the currently traversed data is retained // otherwise it will be filtered out return this.list.filter(item=>!item.done);
     
    },
    // Completed doneList(){
     return this.list.filter(item=>item.done);
    }
   },
   watch:{
    "list":{
     handler(){
      // setItem sets local data // JSON.stringify converts js object to json string // JSON.prase converts string to js object localStorage.setItem("list",JSON.stringify(this.list))
     },
     deep:true,
    }
   }
  })
 </script>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vuex combined with storage to realize local storage of user information
  • Implement vuex local storage using vuex-persistedstate
  • Summary of Vue browser local storage issues
  • How to change fonts in Vue, locally store fonts without referencing online font libraries
  • Vue generates a token and saves it to local storage
  • How to monitor local storage in real time in Vue

<<:  Solution to the problem that order by is not effective in MySQL subquery

>>:  Specific use of stacking context in CSS

Recommend

Web page production TD can also overflow hidden display

Perhaps when I name this article like this, someon...

Brief Analysis of MySQL B-Tree Index

B-Tree Index Different storage engines may also u...

Solution to Nginx 500 Internal Server Error

Today, when I was using Nginx, a 500 error occurr...

PNG Alpha Transparency in IE6 (Complete Collection)

Many people say that IE6 does not support PNG tra...

Application of HTML and CSS in Flash

Application of HTML and CSS in Flash: I accidental...

Implementation steps for docker-compose to deploy etcd cluster

Table of contents Write docker-compose.yml Run do...

How to automatically backup mysql remotely under Linux

Preface: Basically, whether it is for our own use...

Docker installation and configuration image acceleration implementation

Table of contents Docker version Install Docker E...

Tips for implementing multiple borders in CSS

1. Multiple borders[1] Background: box-shadow, ou...

How to compare two database table structures in mysql

During the development and debugging process, it ...

A solution to the abnormal exit of Tomcat caused by semaphore

I'm playing with big data recently. A friend ...

How to use vuex in Vue project

Table of contents What is Vuex? Vuex usage cycle ...

Uncommon but useful tags in Xhtml

Xhtml has many tags that are not commonly used but...

Detailed steps to modify MySQL stored procedures

Preface In actual development, business requireme...