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

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

news 文章来源：https://blog.csdn.net/flclyz/article/details/135490566 2024/11/25 21:34:12

购物车案例

<!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

Nodejs搭配axios下载图片

新建一个文件夹，npm i axios 实测发现只需保留node_modules文件夹，删除package.json不影响使用 1.纯下载图片其实该方法不仅可以下载图片，其他的文件都可以下载 const axios require(axios) const fs require(fs) var arrPic [https:…...

编程日记 2024/1/10 7:01:02

强化学习在生成式预训练语言模型中的研究现状简单调研

1. 绪论本文旨在深入探讨强化学习在生成式预训练语言模型中的应用，特别是在对齐优化、提示词优化和经验记忆增强提示词等方面的具体实践。通过对现有研究的综述，我们将揭示强化学习在提高生成式语言模型性能和人类对话交互的关键作用。虽然这些应用展示…...

编程日记 2024/1/10 6:58:59

python_selenium_安装基础学习

目录 1.为什么使用selenium 2.安装selenium 2.1Chrome浏览器 2.2驱动 2.3下载selenium 2.4测试连接 3.selenium元素定位 3.1根据id来找到对象 3.2根据标签属性的属性值来获取对象 3.3根据xpath语句来获取对象 3.4根据标签的名字获取对象 3.5使用bs4的语法来获取对象…...

编程日记 2024/1/10 6:54:55

面试宝典进阶之关系型数据库面试题

D1、【初级】你都使用过哪些数据库？ （1）MySQL：开源数据库，被Oracle公司收购 （2）Oracle：Oracle公司 （3）SQL Server：微软公司 （4&#…...

编程日记 2024/1/10 6:51:52

Agisoft Metashape 地面点分类参数设置

Agisoft Metashape 点云分类之地面点分类参数设置文章目录 Agisoft Metashape 点云分类之地面点分类参数设置前言一、分类地面点参数二、农村及城区有房屋地区二、植被区域分类三、侵蚀半径（Erosion radius）参数设置前言 Agisoft Metashape提供了自动检测地面点的功能，减少…...

编程日记 2024/1/10 6:48:49

计算机科学速成课【学习笔记】（4）——二进制

本集课程B站链接： 4. 二进制-Representing Numbers and Letters with Binary_BiliBili_哔哩哔哩_bilibili4. 二进制-Representing Numbers and Letters with Binary_BiliBili是【计算机科学速成课】[40集全/精校] - Crash Course Computer Science的第4集视频&…...

编程日记 2024/1/10 6:47:48

数据库开发工具Navicat Premium 15 mac软件特色

Navicat Premium 15 mac版是一款数据库开发工具，Navicat Premium 15 Mac版可以让你以单一程序同時连接到 MySQL、MariaDB、SQL Server、SQLite、Oracle 和 PostgreSQL 数据库。 Navicat Premium mac软件特色无缝数据迁移数据传输，数据同步和结构同步…...

编程日记 2024/1/10 6:45:47

从零开始构建区块链：我的区块链开发之旅

1.引言 1.区块链技术的兴起和重要性区块链技术，作为数字化时代的一项颠覆性创新，已经成为当今世界最令人瞩目的技术之一。自比特币的问世以来，区块链技术已经从仅仅支持加密货币发展成为一种具有广泛应用前景的分布式账本技术。其核心优势…...

编程日记 2024/1/10 6:44:46

c JPEG编码，但有错误

#include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <stdlib.h> #include <unistd.h> #include <sys/ioctl.h> #include <linux/videodev2.h> //v4l2 头文件 #include <strin…...

编程日记 2024/1/10 6:42:44

二级C语言备考1

一、单选共40题 （共计40分） 第1题 （1.0分） 题号:6923 难度:较易第1章以下叙述中正确的是 A:C语言规定必须用main作为主函数名,程序将从此开始执行 B:可以在程序中由用户指定任意一个函数作为主函数…...

编程日记 2024/1/10 6:41:43

专门做网站制作的公司/广告seo是什么意思

Android的应用组件应用组件是 Android 应用的基本构建基块。共有四种不同的应用组件类型。每种类型都服务于不同的目的，并且具有定义组件的创建和销毁方式的不同生命周期。活动Activity服务Service广播接收器(Broadcast Receiver)内容提供程序(Content Provide…...

编程日记 2024/11/25 20:45:19

做外贸推广自己网站/百度投放平台

其实我很早以前就想写一些关于脚本引擎开发的文章了。后来由于自己要写一些程序而暂停了这个计划。其实写这篇文章的原因很简单，我在开发脚本引擎的时候在网上找不到适合自己看的资料，不过最后还是做成了，那么就贡献一下吧。在文章的开头我先…...

编程日记 2024/11/25 20:32:08

实用网站设计步骤/谷歌推广费用多少

此方法撰写于 2019 年 05 月 30 日，能有效阻止 WIN10各版本更新，亲测有效，操作方便。（请将这几步都做完，如果只做单项或几项，不确保它会反复，所以请都做完。注：本文以WIN10 1511企业…...

编程日记 2024/11/25 19:34:24

网址大全web123浏览器app/88个seo网站优化基础知识点

课件的艺术性表现在画面以及人机交互的传递信息上。下面是小编为大家提供的关于小学信息技术绘图的课件，内容如下：(教学目标)学会启动“画图”软件熟悉“画图”窗口的组成能够画简单的画掌握保存文件的基本操作(教学内容)“画图”窗口的组成工具箱上的“…...

编程日记 2024/11/25 16:26:39

烟台网站建设/设计网站用什么软件

目录 0. 相关文章链接 1. ssh没有配置好 2. DataNode和NameNode进程同时只能工作一个 3. 执行命令不生效 4. jps命令问题 5. 不能通过浏览器访问服务的web页面 0. 相关文章链接 Hadoop文章汇总 1. ssh没有配置好在Hadoop的安装过程中，HDFS的主节点NameNode…...

编程日记 2024/11/25 15:46:23

如何修改网站模版/什么叫seo

下面的学习关于脚本，而学习脚本，变量就显得尤为重要，首先，要对变量有一个初步的认识：只对当前的SHELL有效的变量是本地变量,； 还有就是系统环境变量；变量的使用，可以简化脚本&#x…...

编程日记 2024/11/25 15:18:43