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

Detailed process of Vue front-end packaging

Table of contents 1. Add packaging command 2. Run...

A problem with MySQL 5.5 deployment

MySQL deployment Currently, the company deploys M...

How to start the spring-boot project using the built-in linux system in win10

1. Install the built-in Linux subsystem of win10 ...

Implementation of multiple instances of tomcat on a single machine

1. Introduction First of all, we need to answer a...

A Deep Understanding of Angle Brackets in Bash (For Beginners)

Preface Bash has many important built-in commands...

Detailed explanation of JavaScript axios installation and packaging case

1. Download the axios plugin cnpm install axios -...

Example verification MySQL | update field with the same value will record binlog

1. Introduction A few days ago, a development col...

js realizes packaging multiple pictures into zip

Table of contents 1. Import files 2. HTML page 3....

js implements mouse switching pictures (without timer)

This article example shares the specific code of ...

CSS Skills Collection - Classics among Classics

Remove the dotted box on the link Copy code The co...

Solution to the problem of slow docker pull image speed

Currently, Docker has an official mirror for Chin...

Dissecting the advantages of class over id when annotating HTML elements

There are very complex HTML structures in web pag...

How to restore a single database or table in MySQL and possible pitfalls

Preface: The most commonly used MySQL logical bac...