Vue基础之todolist(localstorage组件封装及生命周期函数)

最新推荐文章于 2024-10-06 16:40:19 发布

lemon94924

最新推荐文章于 2024-10-06 16:40:19 发布

阅读量393

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue vue基础菜鸡提升第一步文章标签： vue todolist localstorage

本文链接：https://blog.youkuaiyun.com/lemon94924/article/details/89473984

菜鸡提升第一步同时被 3 个专栏收录

10 篇文章

订阅专栏

vue基础

9 篇文章

订阅专栏

Vue

8 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的购物车应用，包括商品添加、删除、保存至本地等功能，通过v-model、v-for等指令实现了数据绑定和动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现功能：

1.输入框输入商品后回车添加信息至商品；

2.点击商品下的checkbox添加商品至购物车；

3.每项商品或购物车带有删除功能，可直接删除商品；

4.页面刷新后信息不变，即商品信息及购物车信息不变。
在这里插入图片描述

app.vue代码

<template>
  <!--  -->
  <div id="app">

    <input type="text" v-model="todo" @keydown="doAdd($event)">
    <br>

    <h2>商品</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" @change="saveList()"> ---{{ item.title }} ---<button @click="doDel(key)">删除</button>
      </li>
    </ul>
    <br>
    <h2>购物车</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="item.checked">
        <input type="checkbox" v-model="item.checked" @change="saveList()"> ---{{ item.title }} ---<button @click="doDel(key)">删除</button>
      </li>
    </ul>
    <br>

  </div>


</template>

<script>
//导入localstorage
  import storage from './model/storage.js';
  console.log(storage);
  export default {
        name: 'App',
        data(){
          return {
            tode : '',
            list:[

            ]
          }
        },
        methods:{
          doAdd(e){
            if(e.keyCode==13){
              console.log(e.keyCode);
            //获取输入的值,将文本框的值push到list里面
            this.list.push({
              title:this.todo,
              cheched:false
            });
            storage.set('list',this.list);
            this.todo='';
            }
          },
          doDel(key){
            //alert(key);
            //删除数据
            this.list.splice(key,1);
            //H5localstorage缓存数据
            storage.set('list',this.list);
          },
          saveList(){
            storage.set('list',this.list);
          }
        },
      mounted() {//生命周期函数
          var list =  storage.get('list');
          if(list){//判断list是否存在
            this.list =list;
          }
      }

}
</script>
<style>
</style>

组建化localstroage.js文件

//封装操作localstorage本地存储方法，模块化文件

var storage = {
  set(key,value){
    localStorage.setItem(key,JSON.stringify(value));
  },
  get(key){
    return JSON.parse(localStorage.getItem(key));
  }
  ,remove(key){
    localStorage.removeItem(key);
  }
};

export default storage;