当前位置：首页 > news >正文

vue购物车案例，v-model 之 lazy、number、trim，与后端交互

news 2025/9/15 7:08:48

购物车案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="d1"><h1>购物车</h1><table><thead><tr><th>商品id</th><th>商品名</th><th>商品价格</th><th>商品数量</th><th>全选/全不选<input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th></tr></thead><tbody><tr v-for="goods in goodsList"><th>{{goods.id}}</th><td>{{goods.name}}</td><td>{{goods.price}}</td><td><span @click="handleJian(goods)">-</span><input type="text" v-model="goods.count"><span @click="handleAdd(goods)">+</span></td><td><input type="checkbox" v-model="checkGoodList" :value="goods" @change="handleCheckOne"></td></tr></tbody></table><h3>选中的商品：{{checkGoodList}}</h3><h3>是否全选：{{checkAll}}</h3><h3> 总价格：{{getPrice()}}</h3>
</div>
</body>
<script>new Vue({el:'#d1',data:{goodsList: [{id: 1, name: '短袖', price: 99, count: 2},{id: 2, name: '短裤', price: 39, count: 1},{id: 3, name: '短裙', price: 189, count: 6},{id: 4, name: '短袜', price: 8, count: 8},{id: 5, name: '长筒袜', price: 4, count: 88},{id: 6, name: '过膝袜', price: 5, count: 90},],checkGoodList:[],checkAll:false},methods:{getPrice(){var total=0for (var item of this.checkGoodList){total+=item.price * item.count}return total},handleCheckAll(){if (this.checkAll){this.checkGoodList=this.goodsList}else {this.checkGoodList = []}},handleCheckOne(){if (this.checkGoodList.length==this.goodsList.length){this.checkAll=true}else {this.checkAll=false}},handleAdd(goods) {goods.count++},handleJian(goods) {if (goods.count > 1) {goods.count--} else {alert('宝贝不能再少了')}}}})
</script>
</html>

v-model 之 lazy、number、trim

lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>input 和v-model</h1><input type="text" v-model="name"><h1>v-model修饰符：lazy、number、trim</h1><input type="text" v-model.lazy="s1">--->{{s1}}<br><input type="text" v-model.number="s2">--->{{s2}}<br><input type="text" v-model.trim="s3">--->{{s3}}</div>
</body>
<script>var vm = new Vue({el: '#app',data: {name: '彭于晏',s1: '',s2: '',s3: '',},})
</script>
</html>

与后端交互

# 1 使用jq的ajax ===》不好---》引入了jq框架，好多功能用不到
# 2 原生js fetch
提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分
fetch('http://127.0.0.1:5000/userinfo')
.then(response => {
return response.json();
}).then(data => {
this.username = data.username
this.age = data.age
});
# 3 axios 第三方ajax，只有ajax，没有别的，小--》底层还是基于XMLHttpRequest
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

jq发送

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><script src="./js/jq.js"></script>
</head>
<body>
<div id="app"><h1>与后端交互</h1><button @click="handleLoad">加载用户信息</button><p>用户名：{{username}}</p><p>年龄：{{age}}</p></div>
</body>
<script>var vm = new Vue({el: '#app',data: {username: '',age: ''},methods: {handleLoad() {// 后端发送请求，拿到数据，赋值给 username和age 页面就有了// 1 发送请求方式1 使用 jq的ajax$.ajax({url: 'http://127.0.0.1:5000/userinfo',method: 'get',success: data => {// CORS policy  跨域问题---》解决---》后端响应头中加入：Access-Control-Allow-Originconsole.log(typeof data)data = JSON.parse(data)this.username = data.usernamethis.age = data.age}})}}})
</script>
</html>

原生js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><script src="./js/jq.js"></script>
</head>
<body>
<div id="app"><h1>与后端交互</h1><button @click="handleLoad">加载用户信息</button><p>用户名：{{username}}</p><p>年龄：{{age}}</p></div>
</body>
<script>var vm = new Vue({el: '#app',data: {username: '',age: ''},methods: {handleLoad() {// 后端发送请求，拿到数据，赋值给 username和age 页面就有了// 1 原生fetch发送请求fetch('http://127.0.0.1:5000/userinfo').then(response => {return response.json();}).then(data => {this.username = data.usernamethis.age = data.age});}}})
</script>
</html>

axios

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head>
<body>
<div id="app"><h1>与后端交互</h1><button @click="handleLoad">加载用户信息</button><p>用户名：{{username}}</p><p>年龄：{{age}}</p></div>
</body>
<script>var vm = new Vue({el: '#app',data: {username: '',age: ''},methods: {handleLoad() {// 后端发送请求，拿到数据，赋值给 username和age 页面就有了// 1 axios发送请求axios.get('http://127.0.0.1:5000/userinfo').then(res => {console.log(res.data); //真正的响应体的数据在res.datathis.username = res.data.usernamethis.age = res.data.age}).catch(error => {console.log(error);});}}})
</script>
</html>

vue购物车案例，v-model 之 lazy、number、trim，与后端交互

购物车案例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"./js/vue.js"></script> </head> <body> <div id"d1"&…...

编程日记 2024/1/10 7:33:32

云原生Kubernetes: Kubeadm部署K8S 1.29版本单Master架构

目录一、实验 1.环境 2.K8S master节点环境准备 3.K8S master节点安装kubelet、kubeadm、kubectl 3.K8S node节点环境准备与软件安装 4.K8S master节点部署服务 5.K8S node节点部署 6.K8S master节点查看集群 7.容器网络（CNI）部署 8.K8S 集群…...

编程日记 2024/1/10 7:32:31

C++协程操作

什么是C++协程 C++中的协程是一种用户态轻量级线程，它拥有自己的上下文和栈，并且协程的切换和调度由用户定义，不需要陷入内核。如同一个进程可以拥有多个线程，一个线程也可以拥有多个协程。协程的优点在于极高的执行效率，因为协程切换不需要陷入内核，而是由用户程序定义切…...

编程日记 2024/1/10 7:30:30

计算机配件杂谈-鼠标

目录基础知识鼠标的发展鼠标的左右手鼠标的显示样式鼠标的移动和可见性移动可见性现在的我们的生活工作都基本上离不开电脑了，不管是你平时玩玩游戏，上班工作等等； 今天将关于鼠标的一些小的技巧分享出来，共勉！ 基础…...

编程日记 2024/1/10 7:29:29

用Python来制作一个微信聊天机器人

1. 效果展示通过本地搭建一个flask服务器来接收信息，这里我简单使用展示，就没有对接收的信息进行处理了。信息接收展示发送信息展示这里就直接使用python发送一个post请求即可，可以发送文字或者图片代码展示接收信息 #!/usr/bin/e…...

编程日记 2024/1/10 7:28:28

2024年第九届机器学习技术国际会议(ICMLT 2024) 即将召开

2024年第九届机器学习技术国际会议（ICMLT 2024）将于2024年5月24-26日在挪威奥斯陆举行。ICMLT 2024旨在讨论机器学习技术领域的最新研究技术现状和前沿趋势，为来自世界各地的科学家、工程师、实业家、学者和其他专业人士提供一个互动和交流的…...

编程日记 2024/1/10 7:27:27

算法训练day9Leetcode232用栈实现队列225用队列实现栈

今天学习的文章和视频链接 https://programmercarl.com/%E6%A0%88%E4%B8%8E%E9%98%9F%E5%88%97%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80.html 栈与队列理论基础见我的博客 https://blog.csdn.net/qq_36372352/article/details/135470438?spm1001.2014.3001.5501 232用栈实现…...

编程日记 2024/1/10 7:26:26

linux驱动(四):platform

本文主要探讨x210驱动的平台设备类型(platform)以及misc设备。驱动模型设备驱动模型：总线(bus type)、设备(device)和驱动(driver) 总线：虚拟总线用于挂接驱动驱动和设备总线、设备、驱动关系：/sys/bus下的子目录…...

编程日记 2024/1/10 7:22:22

Guava：Cache强大的本地缓存框架

Guava Cache是一款非常优秀的本地缓存框架。一、经典配置 Guava Cache 的数据结构跟 JDK1.7 的 ConcurrentHashMap 类似，提供了基于时间、容量、引用三种回收策略，以及自动加载、访问统计等功能。基本的配置 Testpublic void testLoadingCache() th…...

编程日记 2024/1/10 7:21:21

#{}和${}的区别？

#{}是占位符，预编译处理；${}是拼接符，字符串替换，没有预编译处理。Mybatis在处理#{}时，#{}传入参数是以字符串传入，会将SQL中的#{}替换为?号，调用PreparedStatement的set方法来赋值。Mybatis在…...

编程日记 2024/1/10 7:20:20

string的模拟实现

string的模拟实现 msvc和g下的string内存比较成员变量构造函数与析构函数拷贝构造函数赋值拷贝c_str、size和capacity函数以及重载[]、clear、expand_capacity迭代器与遍历reservepush_back、append、insert字符串比较运算符erase<<流提取 >>流插入resizefindsubst…...

编程日记 2024/1/10 7:19:19

算法练习：查找二维数组中的目标值

题目： 编写一个高效的算法来搜索矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性：每行的元素从左到右升序排列。每列的元素从上到下升序排列。实现： 1. main方法 public static void main(String[] args) {int[][] matrix {{1…...

编程日记 2024/1/10 7:18:18

考研自命题资料、考题如何找

这篇文章是抖音和b站上上传的同名视频的原文稿件，感兴趣的csdn用户可以关注我的抖音和b站账号（GeekPower极客力量）。同时这篇文章也为视频观众提供方便，可以更加冷静地分析和思考。文章同时在知乎发表。去年我发布了一个视频&am…...

编程日记 2024/1/10 7:17:17

MySQL 存储引擎和索引类型介绍

1. 引言 MySQL 是一个流行的关系型数据库管理系统，提供多种存储引擎以满足不同的业务需求。本文将介绍几种常见的 MySQL 存储引擎和索引类型比较，并给出相应的示例。 2. 存储引擎概述 2.1 InnoDB 存储引擎 InnoDB 是 MySQL 的默认存储引擎&#xff0…...

编程日记 2024/1/10 7:15:15

element-ui table height 属性导致界面卡死

问题: 项目上，有个点击按钮弹出抽屉的交互, 此时界面卡死原因分析: 一些场景下(父组件使用动态单位/弹窗、抽屉中使用), element-ui 的 table 会循环计算高度值, 导致界面卡死 github 上的一些 issues 和解决方案: Issues ElemeFE/element GitHub 官方讲是升…...

编程日记 2024/1/10 7:12:12

Vue2.v-指令

v-if 在双引号中写判断条件。 <div v-if"score>90">A</div> <div v-else-if"score>80">B</div> <div v-else>C</div>v-on: :冒号后面跟着事件。为了简化，可以直接用代替v-on:。事件名“内联语…...

编程日记 2024/1/10 7:11:11

Java中SpringBoot组件集成接入【Knife4j接口文档（swagger增强）】

Java中SpringBoot组件集成接入【Knife4j接口文档】 1.Knife4j介绍2.maven依赖3.配置类4.常用注解使用1.实体类及属性（@ApiModel和@ApiModelProperty）2.控制类及方法（@Api、@ApiOperation、@ApiImplicitParam、 @ApiResponses）3.@ApiOperationSupport注解未生效的解决方法5.…...

编程日记 2024/1/10 7:09:09

继承和多态的详解

文章目录 1. 继承1.1 继承的概念1.3 继承的语法1.3 父类成员访问1.3.1 子类中访问父类的成员变量1.3.2 子类中访问父类的成员方法 1.4 子类构造方法 2.super关键字2.1 super关键字的概念2.2 super和this的区别 3. 在继承中访问限定符的可见性4. 继承方式的分类5. 多态5.1 多态的…...

编程日记 2024/1/10 7:07:08

【Unity】UniTask(异步工具)快速上手

UniTask(异步工具) 官方文档：https://github.com/Cysharp/UniTask/blob/master/README_CN.md URL:https://github.com/Cysharp/UniTask.git?pathsrc/UniTask/Assets/Plugins/UniTask 优点：0GC，可以在任何地方使用为Unity提供一个高性能&…...

编程日记 2024/1/10 7:05:05

k8s三种常用的项目发布方式

k8s三种常用的项目发布方式 1、蓝绿发布 2、金丝雀发布(灰度发布)：使用最多 3 、滚动发布应用程序升级，面临的最大问题是新旧业务之间的切换。项目的生命周期：立项----定稿----需求发布----开发----测试-----发布最后测试之后上线。再…...

编程日记 2024/1/10 7:04:04

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/9/15 0:18:50

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞！！！ 抽象现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...

编程新知 2025/9/14 13:50:41

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器支持多种策略分发流量…...

编程新知 2025/9/14 11:16:46

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/8/14 5:51:59

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/8/21 16:44:19

剑指offer20_链表中环的入口节点

链表中环的入口节点给定一个链表，若其中包含环，则输出环的入口节点。若其中不包含环，则输出null。数据范围节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。节点 val 值各不相同。链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/8/22 22:30:54

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

C++ 基础特性深度解析

目录引言一、命名空间（namespace） C 中的命名空间与 C 语言的对比二、缺省参数 C 中的缺省参数与 C 语言的对比三、引用（reference） C 中的引用与 C 语言的对比四、inline（内联函数…...

编程新知 2025/9/8 23:17:56

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN）曾被视为…...

编程新知 2025/9/3 5:05:40

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲：核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用，还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/9/2 17:47:53