vue快速入门(二十五)本地存储与初始化使用

注释很详细,直接上代码

上一篇

新增内容

  1. 本地获取数据
  2. 数据存储到本地

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 挂载点 --><div id="root"><div>姓名:<input type="text" v-model="msg.name"></div><div>年龄:<input type="text" v-model="msg.age"></div></div><!-- 导入vue的js代码:不会下载的看专栏第一篇 --><script src="./lib/vue2.js"></script><script>const app = new Vue({// Vue实例el: '#root',// 挂载点data: {// 数据//从本地获取数据,没有获取到,就使用默认内容msg: JSON.parse(localStorage.getItem('msg')) || {name: '张三',age: 18}},methods: {// 方法},computed:{// 计算属性},watch:{// 侦听器msg:{          deep:true,handler(val){// 将数据保存到本地localStorage.setItem('msg',JSON.stringify(val))}}}})</script>
</body></html>

效果演示(可以看到重新打开,本地存储还是存在的)

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/819147.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【浪漫 罗盘时钟 Js、css实现(附源代码) 美化版本】,前端面试必问的HashMap

先自我介绍一下&#xff0c;小编浙江大学毕业&#xff0c;去过华为、字节跳动等大厂&#xff0c;目前阿里P7 深知大多数程序员&#xff0c;想要提升技能&#xff0c;往往是自己摸索成长&#xff0c;但自己不成体系的自学效果低效又漫长&#xff0c;而且极易碰到天花板技术停滞…

java发送短信

1、参考&#xff1a;Java_消息&短信 MSGSMS_开发指南_代码样例_X-WSSE认证 参考"发送短信"这一块的代码 2、执行main方法&#xff0c;报错了&#xff0c;报错如下&#xff1a; {"code":"E000027","description":"Invalid …

WebKit简介及工作流程

文章目录 一、WebKit简介二、WebKit结构三、Webkit工作流程四、WebKit常见问题五、WebKit优点六、相关链接 一、WebKit简介 WebKit是一个开源的浏览器引擎&#xff0c;它的起源可以追溯到2001年&#xff0c;当时苹果公司推出了其首款基于Unix的操作系统Mac OS X。在2002年&…

欧拉公式;傅里叶变换;耳朵:声波(音频)眼睛:光波(图像) 大脑:傅里叶快速变换

目录 复分析 复数指数函数 欧拉公式 a点向量,方向和长度的向量;

最短网络kruskal算法

题目描述 农民约翰被选为他们镇的镇长&#xff01;他其中一个竞选承诺就是在镇上建立起互联网&#xff0c;并连接到所有的农场。当然&#xff0c;他需要你的帮助。约翰已经给他的农场安排了一条高速的网络线路&#xff0c;他想把这条线路共享给其他农场。为了用最小的消费&…

【Java开发指南 | 第七篇】静态变量生命周期、初始化时机及静态变量相关性质

读者可订阅专栏&#xff1a;Java开发指南 |【CSDN秋说】 文章目录 生命周期初始化时机常量和静态变量的区别静态变量相关性质静态变量的访问修饰符静态变量的线程安全性静态变量的命名规范 生命周期 生命周期&#xff08;Lifecycle&#xff09;是指一个对象从创建到销毁的整个…

NVIC简介

NVIC&#xff08;Nested Vectored Interrupt Controller&#xff09;是ARM处理器中用于中断管理的一个重要硬件模块。它负责处理来自多个中断源的中断请求&#xff0c;并根据中断的优先级来安排处理器执行相应的中断服务例程&#xff08;ISR&#xff09;。NVIC是ARM Cortex-M系…

光电传感器的工作原理简介

光电传感器是一种利用光电效应将光信号转换为电信号的传感器。 工作原理 光照射&#xff1a;光电传感器通过光源&#xff08;如LED或激光&#xff09;照射在其表面。 光电转换&#xff1a;光线与传感器材料发生光电反应&#xff0c;产生电信号。这种转换过程涉及到光子与电子的…

Albumentations库:为自定义数据进行数据增强

点击下方卡片&#xff0c;关注“小白玩转Python”公众号 为什么在深度学习中使用增强&#xff1f; 深度学习和计算机视觉中的增强已经成为至关重要的几个原因。首先&#xff0c;它丰富了训练数据集&#xff0c;使模型能够从更多样化的示例中学习&#xff0c;这在标记数据有限时…

链表中的头指针与头节点[示例解释]

详细解释&#xff1a; Node* head new Node(1);&#xff1a;这行代码创建了一个头指针 head&#xff0c;指向一个新创建的节点&#xff0c;数据值为 1&#xff0c;这个节点是链表的头节点。 new Node(1)返回的地址赋值给了head 。 head->next new Node(2);&#xff1a;这…

C++修炼之路之list--C++中的双向循环链表

目录 前言 一&#xff1a;正式之前先回顾数据结构中的双向循环链表 二&#xff1a;list的简介 三&#xff1a;STL中list常用接口函数的介绍及使用 1.构造函数接口 2.list迭代器 范围for 3.数据的修改接口函数 4.list容量操作函数 5.list的迭代器失效 6.演示代码和测…

【深度剖析】曾经让人无法理解的事件循环,前端学习路线

先自我介绍一下&#xff0c;小编浙江大学毕业&#xff0c;去过华为、字节跳动等大厂&#xff0c;目前阿里P7 深知大多数程序员&#xff0c;想要提升技能&#xff0c;往往是自己摸索成长&#xff0c;但自己不成体系的自学效果低效又漫长&#xff0c;而且极易碰到天花板技术停滞…

Mybatispuls-自动填充

一&#xff0c; 创建时间 . 修改时间! 这些个操作都是自动化完成的,我们不希望手动更新! 阿里巴巴开发手册:所有的数据库表:gmt_create .gmt_modified几乎所有的表都要配置上!而且需要自动化! 二&#xff0c;如何实现 1&#xff0c;编写实体类&#xff08;字段属性上添加注解…

ubuntu 23.10.1 mysql 安装

注&#xff1a;请进入root用户模式下操作&#xff0c;若没有&#xff0c;输入命令前加上sudo 1、更新软件包列表 apt update2、安装最新版的Mysql服务器 apt install mysql-server -y如果不加-y 会在安装过程中&#xff0c;系统将提示你设置MySQL的root密码。确保密码足够强…

基于直方图的图像阈值计算和分割算法FPGA实现,包含tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 VIVADO2019.2 matlab2022a 3.部分核心程序 timescale 1ns / 1ps // // Company: // Engineer: // // Design Name: // …

【Go】通道:缓冲通道和非缓冲通道

目录 通道的基本概念 缓冲通道 非缓冲通道 总结 通道的基本概念 在Go语言中&#xff0c;通道是一种特殊的类型&#xff0c;用于在goroutine之间传递数据。你可以将通道想象为数据的传输管道。通道分为两种类型&#xff1a; 非缓冲通道&#xff08;Unbuffered Channels&…

【御控物联】Java JSON结构转换(1):对象To对象——键值互换

文章目录 一、JSON是什么&#xff1f;二、JSON结构转换是什么&#xff1f;三、核心构件之转换映射四、案例之《JSON对象 To JSON对象》五、代码实现六、在线转换工具七、技术资料 一、JSON是什么&#xff1f; Json&#xff08;JavaScript Object Notation&#xff09;产生于20…

Leetcode876_链表的中间结点

1.leetcode原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 2.题目描述 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5…

vue项目中,修改fabric默认操作

场景&#xff1a;fabricjs绘制的元素&#xff0c;默认点击鼠标左键即可自由移动元素。需要把操作改为&#xff0c;点击鼠标左键先选中元素&#xff0c;只有选中的元素&#xff0c;按住鼠标左键后才能移动 // 初始化canvas var canvas new fabric.Canvas(c);// 添加一个矩形元…

类与对象(中)

目录 赋值运算符重载 运算符重载 赋值运算符重载 前置和后置重载 日期类的实现&#xff08;前置后置也在里面&#xff09; const 成员 ​编辑 取地址及const取地址操作符重载 赋值运算符重载 运算符重载 C为了增强代码的可读性引入了运算符重载&#xff0c;运算符重载…