vue知识-03

购物车案例

要实现的功能:

        1、计算商品总价格

        2、全选框和取消全选框

        3、商品数量的增加和减少

<body>
<div id="app"><div class="row"><div class="col-md-6 col-md-offset-3"><h1 class="text-center">购物车</h1><table class="table table-bordered table-info" ><thead><tr><th>商品id</th><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>全 选or不选<input type="checkbox" v-model="CheckAll" @change="handleCheckAll"></th></tr></thead><tbody><tr v-for="good in goodList"><th scope="row">{{good.id}}</th><td>{{good.name}}</td><td>{{good.price}}</td><td><span class="btn" @click="handleJian(good)">-</span><input type="text" v-model="good.count"><span class="btn" @click="handleAdd(good)">+</span></td><td><input type="checkbox" v-model="CheckGoodList" :value="good" @change="handleCheckOne"></td></tr></tbody></table><hr><h6>已选商品:{{CheckGoodList}}</h6><h6>是否全选:{{CheckAll}}</h6><h6>总价格:{{GetPrice()}}</h6></div></div>
</div>
</body>
<script>new Vue({el:'#app',data:{goodList:[{id:1,name:'iPhone 12',price:699,count: 2},{id:2,name:'iPhone 13',price:799,count: 2},{id:3,name:'iPhone 14',price:899,count: 2},{id:4,name:'iPhone 15',price:999,count: 2},{id:5,name:'iPhone 16',price:1099,count: 2},{id:6,name:'iPhone 17',price:1199,count: 2}],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.goodList} else {// 取消全选this.CheckGoodList = []}},//单选handleCheckOne(){if (this.CheckGoodList.length == this.goodList.length){this.CheckAll = true} else {this.CheckAll = false}},//商品数量减少handleJian(good){if (good.count > 1){good.count --}else {alert('不能再少了,受不了了')}},//商品数量增加handleAdd(good){good.count ++}}})
</script>

v-model之lazy、number、trim

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

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

与后端交互的类型

jq的 ajax:会引入了jq框架,好多功能用不到,不是很好
js的 fetch:提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分

 fetch('http://127.0.0.1:5000/userinfo').then(response => {return response.json();}).then(data => {this.username = data.usernamethis.age = data.age});

axios:是第三方ajax,占内存小,底层还是基于XMLHttpRequest      

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

jq的ajax发送

<button @click="handleLoad">加载用户信息</button>methods: {handleLoad() {// 后端发送请求,拿到数据,赋值给 username和age 页面就有了// 1 发送请求方式1 使用 jq的ajax$.ajax({url: 'http://127.0.0.1:5000/userinfo',method: 'get',success: data => {console.log(typeof data)  //查看数据类型data = JSON.parse(data)  //把字符串转换成对象this.username = data.username  //把数据赋值给data中的usernamethis.age = data.age}})}
}

js的fetch发送

<button @click="handleLoad">加载用户信息</button>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}})}
}

axios发送

<button @click="handleLoad">加载用户信息</button>methods: {handleLoad() {// 后端发送请求,拿到数据,赋值给 username和age 页面就有了// 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);}})}
}

小电影案例

<body>
<div id="app"><h1>点击显示小电影案例</h1><button @click="handleLoad">加载</button><div v-for="film in filmList"><img :src="film.poster" alt="" height="200px" width="150px"><div><h3>{{film.name}}</h3><p>主演:<span v-for="item in film.actors">{{item.name}} &nbsp;&nbsp;</span></p><p>{{film.nation}}|{{film.runtime}}</p></div></div></div>
</body>
<script>var vm = new Vue({el: '#app',data: {filmList: [],name: 'zhoujiaqi'},methods: {handleLoad() {// 发起get请求axios.get('http://127.0.0.1:7000/app/film/film/').then(res => {// 判断请求是否成功if (res.data.code == 100) {// 将请求的数据赋值给filmListthis.filmList = res.data.results} else {// 请求失败,弹出提示框alert(res.data.msg)}})}}})
</script>
from rest_framework.viewsets import ViewSet
from rest_framework.decorators import action
import json
from django.http import JsonResponse# 小电影后端
# 定义一个Movie类,继承自ViewSet
class Movie(ViewSet):@action(methods=['get'], detail=False)def film(self,requset):with open('film.json', 'r', encoding='utf-8')as f:res = json.load(f)res = JsonResponse(res)     # 使用JsonResponse返回结果res.headers = {'Access-Control-Allow-Origin': '*'}   # 跨域return res

2、

今日思维导图:

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

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

相关文章

激活/注册navicat15

一、获取软件 链接&#xff1a;https://pan.baidu.com/s/1F_tiLuLvVFMEz8pDfIvDjw?pwdjjfj 提取码&#xff1a;jjfj 二、安装 安装的过程我就不放了&#xff0c;重点如下 安装完不要打开软件&#xff01; 安装完不要打开软件&#xff01; 安装完不要打开软件&#xff01;…

Kafka集群部署 (KRaft模式集群)

KRaft 模式是 Kafka 在 3.0 版本中引入的新模式。KRaft 模式使用了 Raft 共识算法来管理 Kafka 集群元数据。Raft 算法是一种分布式共识算法&#xff0c;具有高可用性、可扩展性和安全性等优势。 在 KRaft 模式下&#xff0c;Kafka 集群中的每个 Broker 都具有和 Zookeeper 类…

直流负载的基础知识

直流负载的主要特性包括电阻、电感和电容。电阻是直流负载的基本特性&#xff0c;它决定了负载消耗电能的能力。电感和电容则是直流负载的动态特性&#xff0c;它们决定了负载对电压和电流变化的响应速度。此外&#xff0c;直流负载还具有非线性特性&#xff0c;即负载的电压和…

SpringBoot外部配置文件

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 循序渐进学SpringBoot ✨特色专栏&…

查看Linux磁盘空间

(1)、该命令会列出当前系统所有挂载的文件系统以及它们的使用情况&#xff0c;包括总容量、已用空间、可用空间、使用百分比等信息 df -h如果查看某一个文件夹的,可以 df -h folderName (2)、计算指定目录下所有文件和子目录所占用的磁盘空间大小&#xff0c;并以人类可读的格…

UGUI Image图像控件替换图片

代码为探索而来&#xff0c;不是最优代码&#xff0c;请按需使用。 Unity3d引擎版本&#xff1a;Uinty3d 20233.2.3f1 补充一下图片如何改成Texture2D&#xff1a; 1、将图片导入unity。 2、选择图片&#xff0c;按下图操作&#xff0c;点击应用即可。 脚本代码&#xff1a…

建模软件Rhinoceros mac介绍说明

Rhinoceros mac是一款3D设计软件“犀牛”&#xff0c;在当今众多三维建模软件中&#xff0c;Rhinoceros 版因为其体积小、功能强大、对硬件要求低而广受欢迎&#xff0c;对于专业的3D设计人员来说它是一款不错的3D建模软件&#xff0c;Rhinoceros Mac中文版能轻易整合3DS MAX与…

(aiohttp-asyncio-FFmpeg-Docker-SRS)实现异步摄像头转码服务器

1. 背景介绍 在先前的博客文章中&#xff0c;我们已经搭建了一个基于SRS的流媒体服务器。现在&#xff0c;我们希望通过Web接口来控制这个服务器的行为&#xff0c;特别是对于正在进行的 RTSP 转码任务的管理。这将使我们能够在不停止整个服务器的情况下&#xff0c;动态地启动…

Matlab三维绘图

绘制三维图plot3 t0:pi/50:10*pi; xsin(t); ycos(t); zt; plot3(x,y,z); 产生栅格数据点meshgrid 这个接口在绘制三维图像里面相当重要&#xff0c;很多时候要将向量变成矩阵才能绘制三维图。 x0:0.5:5; y0:1:10; [X,Y]meshgrid(x,y); plot(X,Y,o); x和y是向量&#xff0c;…

第二百五十九回

文章目录 知识回顾示例代码经验总结 我们在上一章回中介绍了MethodChannel的使用方法&#xff0c;本章回中将介绍EventChannel的使用方法.闲话休提&#xff0c;让我们一起Talk Flutter吧。 知识回顾 我们在前面章回中介绍了通道的概念和作用&#xff0c;并且提到了通道有不同的…

STM32--基于STM32F103的MAX30102心率血氧测量

本文介绍基于STM32F103ZET6MAX30102心率血氧测量0.96寸OLED&#xff08;7针&#xff09;显示&#xff08;完整程序代码见文末链接&#xff09; 一、简介 MAX30102是一个集成的脉搏血氧仪和心率监测仪生物传感器的模块。它集成了一个红光LED和一个红外光LED、光电检测器、光器…

【AI视野·今日NLP 自然语言处理论文速览 第七十三期】Tue, 9 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Tue, 9 Jan 2024 Totally 80 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers FFSplit: Split Feed-Forward Network For Optimizing Accuracy-Efficiency Trade-off in Language Model Infe…

JS 高频面试题

JS 的数据类型有哪些&#xff0c;有什么区别 基本数据类型&#xff08;Undefined、Null、Boolean、Number、String、Symbol&#xff09; 引用数据类型&#xff08;对象、数组和函数&#xff09; 区别&#xff1a; 原始数据类型直接存储在栈&#xff08;stack&#xff09;中的简…

WindowsServer安装mysql最新版

安装 下载相应mysql安装包&#xff1a; MySQL :: Download MySQL Installer 选择不登陆下载 双击运行下载好的mysql-installer-community-*.*.*.msi 进入类型选择页面&#xff0c;本人需要mysql云服务就选择了server only server only&#xff08;服务器&#xff09;&#x…

ChatGPT本地部署,学习记录

一、GPT4ALL模型 官网地址&#xff1a; Github&#xff1a;https://github.com/nomic-ai/gpt4all GPT4ALL项目部署简易&#xff0c;但是在运行体验上一般&#xff0c;并且是只调用CPU来进行运算。 看官方文档介绍在嵌入式上有比较大的优势&#xff0c;但是目前个人对嵌入式…

QT开发 2024最新版本优雅的使用vscode开发QT

▬▬▬▬▬▶VS开发QT◀▬▬▬▬▬ &#x1f384;先看效果 &#x1f384;编辑环境变量 如图添加环境变量&#xff01;&#xff01;&#xff01; 东西全在QT的安装目录&#xff01;&#xff01;&#xff01; 找到的按照我的教程再装一次&#xff01;&#xff01;&#xff01; 点…

Vue3 + TS + Element-Plus —— 项目系统中封装表格+搜索表单 十分钟写五个UI不在是问题

前期回顾 纯前端 —— 200行JS代码、实现导出Excel、支持DIY样式&#xff0c;纵横合并-CSDN博客https://blog.csdn.net/m0_57904695/article/details/135537511?spm1001.2014.3001.5501 目录 一、&#x1f6e0;️ newTable.vue 封装Table 二、&#x1f6a9; newForm.vue …

RK3399平台入门到精通系列讲解(基础篇)__LITTLE_ENDIAN_BITFIELD 宏的使用

🚀返回总目录 文章目录 一、什么是字节序二、小端模式(Little-Endian)三、大端模式(Big-Endian)四、__LITTLE_ENDIAN_BITFIELD 使用案例一、什么是字节序 在计算机中,数据是以最原始的二进制 0 和 1 的方式被存储的。在大多数现代计算机体系架构中,计算机的最小可寻址数…

UE5.1_UMG序列帧动画制作

UE5.1_UMG序列帧动画制作 UMG序列帧动画制作相对比较简单&#xff0c;不像视频帧需要创建媒体播放器那么复杂&#xff0c;以下简要说明&#xff1a; 1. 事件函数 2. 准备序列帧装入数组 3. 构造调用事件函数 4. 预览 序列帧UMG0105 5. 完成&#xff01;按需配置即可。

【elastic search】JAVA操作elastic search

目录 1.环境准备 2.ES JAVA API 3.Spring Boot操作ES 1.环境准备 本文是作者ES系列的第三篇文章&#xff0c;关于ES的核心概念移步&#xff1a; https://bugman.blog.csdn.net/article/details/135342256?spm1001.2014.3001.5502 关于ES的下载安装教程以及基本使用&…