【Vue3】基础语法案例

图片点击轮播

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>图片轮播</title>
</head><body><div id="app"><h3>{{ number }}</h3><!-- 通过模板字符串取值 --><img :src=`/images/${number}.jpg` style="width: 300px;"> <hr><button @click="prev">上一张</button><button @click="next">下一张</button><ul><li v-for="(value, index) in 4"><a href="#" @click="jump(value)">{{ value }}</a></li></ul></div><script type="module">import { createApp, ref } from './vue.esm-browser.js'createApp({setup() {const number = ref(1)//上一张const prev = () => {number.value--if (number.value == 0) {number.value = 4}}//下一张const next = () => {number.value++if (number.value == 5) {number.value = 1}}//跳转const jump = (value) => {number.value = value}return {number,prev,next,jump}}}).mount("#app")</script>
</body>
</html>

上述程序运行的结果如下：
在这里插入图片描述
点击按钮可进行前后翻图片，点击直达序号可直接切换图片。

TodoList

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>TodoList</title>
</head><body><div id="app"><input type="text" v-model="data.content"><button @click="add">添加</button> <hr><ul><li v-for="(value, index) in data.list">{{ value }} <button @click="del(index)">删除</button></li></ul>记录数 {{ data.list.length }} <br><button @click="clear">清空</button></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({content: "",list: ["世界你好", "Hello World!"],})//添加const add = () => {if (data.content == "") {alert("请填写内容")return}data.list.push(data.content) //push 向数组末尾添加一个或多个元素data.content = "" //清空文本框}//删除const del = (index) => {data.list.splice(index, 1) //splice(要删除元素的索引位置, 要删除的元素数量)}//清空const clear = () => {data.list = []}return {data,add,del,clear}}}).mount("#app")</script>
</body></html>

上述程序运行的结果如下：
在这里插入图片描述
可添加及删除list项，同时也可清空列表。

购物车

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>购物车</title><style>table {width: 600px;color: #8f8e8e;text-align: center;border-collapse: collapse;}table thead {background: #F5F5F5;}table tr {height: 30px;line-height: 30px;border: 1px solid #ececec;}</style>
</head><body><div id="app"><table><thead><tr><td><input type="checkbox" v-model="data.selected" @change="selectAll" /></td><td>商品</td><td>单价</td><td>库存</td><td colspan="2">操作</td></tr></thead><tbody><tr v-for="(value, index) in data.list"><td><input type="checkbox" v-model="data.checkboxList" :value="value" @change="checkSelect" /></td><td>{{ value.name }}</td><td>{{ value.price }}</td><td>{{ value.stock }}</td><td><button @click="sub(value)">-</button>{{ value.number }}<button @click="add(value)">+</button></td><td><button @click="del(index,value.id)">删除</button></td></tr></tbody><tfoot><tr><td>总价 {{ totalPrice() }}</td></tr></tfoot></table></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({selected: false,checkboxList: [],list: [{id: 1,name: "电脑",price: 7000,number: 1,stock: 3},{id: 2,name: "鼠标",price: 20,number: 2,stock: 5},{id: 3,name: "键盘",price: 300,number: 1,stock: 6}],})//减const sub = (value) => {value.number--if (value.number <= 1) {value.number = 1}}//加const add = (value) => {value.number++if (value.number >= value.stock) {value.number = value.stock}}//删除const del = (index, id) => {data.list.splice(index, 1) //splice(要删除元素的索引位置, 要删除的元素数量)//filter 筛选符合条件的元素, 返回一个新的数组let newArr = data.checkboxList.filter((value, index) => {return value.id != id})data.checkboxList = newArrcheckSelect() //检查勾选状态}//总价const totalPrice = () => {let total = 0for (let i = 0; i < data.checkboxList.length; i++) {total += data.checkboxList[i].price * data.checkboxList[i].number}return total}//全选/反选const selectAll = () => {if (data.selected) { //truedata.checkboxList = data.list} else { //falsedata.checkboxList = []}}//检查勾选状态const checkSelect = () => {if (data.checkboxList.length != data.list.length || data.list.length == 0) {data.selected = false} else {data.selected = true}}return {data,sub,add,del,totalPrice,selectAll,checkSelect}}}).mount("#app")</script>
</body>
</html>

上述程序运行结果如下所示：
在这里插入图片描述

下面是购物车优化版

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>购物车2.0</title><style>table {width: 600px;color: #8f8e8e;text-align: center;border-collapse: collapse;}table thead {background: #F5F5F5;}table tr {height: 30px;line-height: 30px;border: 1px solid #ececec;}</style>
</head><body><div id="app"><table><thead><tr><!-- <td><input type="checkbox" v-model="data.selected" @change="selectAll" /></td> --><td><input type="checkbox" v-model="data.selected" /></td><td>商品</td><td>单价</td><td>库存</td><td colspan="2">操作</td></tr></thead><tbody><tr v-for="(value, index) in data.list"><!-- <td><input type="checkbox" v-model="data.checkboxList" :value="value" @change="checkSelect" /></td> --><td><input type="checkbox" v-model="data.checkboxList" :value="value" /></td><td>{{ value.name }}</td><td>{{ value.price }}</td><td>{{ value.stock }}</td><td><button @click="sub(value)">-</button>{{ value.number }}<button @click="add(value)">+</button></td><td><button @click="del(index,value.id)">删除</button></td></tr></tbody><tfoot><tr><!-- <td>总价 {{ totalPrice() }}</td> --><td>总价 {{ totalPrice }}</td></tr></tfoot></table></div><script type="module">import { createApp, reactive, watch, computed } from './vue.esm-browser.js'createApp({setup() {const data = reactive({selected: false,checkboxList: [],list: [{id: 1,name: "电脑",price: 7000,number: 1,stock: 3},{id: 2,name: "鼠标",price: 20,number: 2,stock: 5},{id: 3,name: "键盘",price: 300,number: 1,stock: 6}],})//减const sub = (value) => {value.number--if (value.number <= 1) {value.number = 1}}//加const add = (value) => {value.number++if (value.number >= value.stock) {value.number = value.stock}}//删除const del = (index, id) => {data.list.splice(index, 1) //splice(要删除元素的索引位置, 要删除的元素数量)//filter 筛选符合条件的元素, 返回一个新的数组let newArr = data.checkboxList.filter((value, index) => {return value.id != id})data.checkboxList = newArr//checkSelect() //检查勾选状态}/*//总价const totalPrice = () => {let total = 0for (let i = 0; i < data.checkboxList.length; i++) {total += data.checkboxList[i].price * data.checkboxList[i].number}return total}*///计算属性-有缓存 [计算属性根据其依赖的响应式数据变化而重新计算]const totalPrice = computed(() => {/*reduce定义: 用于对数组中的所有元素进行迭代操作, 并将每次操作的结果累加到一个初始值上reduce接收两个参数: 一个是累加器函数, 另一个是初始值reduce: 将 data.checkboxList 数组中的每个 checkbox 对象的 price 和 number 属性进行相乘, 并将结果累加到初始值 0 上, 最后返回累加的结果total(累加器) 用于存储每次计算的结果, 初始值为 0item(当前元素) 在每次迭代过程中, 当前元素的值会被传递给回调函数*/return data.checkboxList.reduce((total, item) => total + item.price * item.number, 0)})/*//全选/反选const selectAll = () => {if (data.selected) { //truedata.checkboxList = data.list} else { //falsedata.checkboxList = []}}*///监听 data.selectedlet flag = truewatch(() => data.selected, (newValue, oldValue) => {//console.log("newValue:",newValue,"oldValue:",oldValue)if (newValue) {data.checkboxList = data.list} else {if (flag) {data.checkboxList = []}}//console.log(data.checkboxList)})                /*//检查勾选状态const checkSelect = () => {if (data.checkboxList.length == data.list.length && data.list.length != 0) {data.selected = true} else {data.selected = false}}*///监听 data.checkboxListwatch(() => data.checkboxList, (newValue, oldValue) => {console.log("newValue:", newValue, "oldValue:", oldValue)console.log(newValue.length)if (newValue.length == data.list.length && data.list.length != 0) {data.selected = trueflag = true} else {data.selected = falseflag = false}})                return {data,sub,add,del,totalPrice,//selectAll,//checkSelect}}}).mount("#app")</script>
</body>
</html>

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

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

相关文章

【大数据学习 | kafka高级部分】kafka的kraft集群

【大数据学习 | kafka高级部分】kafka的kraft集群

首先我们分析一下zookeeper在kafka中的作用 zookeeper可以实现controller的选举&#xff0c;并且记录topic和partition的元数据信息&#xff0c;帮助多个broker同步数据信息。 在新版本中的kraft模式中可以这个管理和选举可以用kafka自己完成&#xff0c;而不再依赖zookeeper。…
阅读更多...
生物发酵装备在制药工业中的应用与发展前景

生物发酵装备在制药工业中的应用与发展前景

在现代制药工业中&#xff0c;发酵技术扮演着越来越重要的角色。发酵设备&#xff0c;作为这一技术的核心&#xff0c;不仅促进了抗生素、疫苗和生物药物的生产&#xff0c;还为酶的生物合成提供了必要的条件。 发酵技术是指人们利用微生物的发酵作用&#xff0c;通过一系列的…
阅读更多...
HCIP快速生成树 RSTP

HCIP快速生成树 RSTP

STP&#xff08;Spanning Tree Protocol&#xff0c;生成树协议&#xff09;和RSTP&#xff08;Rapid Spanning Tree Protocol&#xff0c;快速生成树协议&#xff09;都是用于在局域网中消除环路的网络协议。 STP&#xff08;生成树协议&#xff09; 基本概念&#xff1a; ST…
阅读更多...
Excel 无法打开文件

Excel 无法打开文件

Excel 无法打开文件 ‘新建 Microsoft Excel 工作表.xlsx",因为 文件格式或文件扩展名无效。请确定文件未损坏&#xff0c;并且文件扩展名与文件的格式匹配。 原因是卸载WPS之后&#xff0c;注册表未修改过来。 重新下载WPS&#xff0c;新建&#xff0c;xls工作表&#x…
阅读更多...
【计算机网络】网络框架

【计算机网络】网络框架

一、网络协议和分层 1.理解协议 什么是协议&#xff1f;实际上就是约定。如果用计算机语言进行表达&#xff0c;那就是计算机协议。 2.理解分层 分层是软件设计方面的优势&#xff08;低耦合&#xff09;&#xff1b;每一层都要解决特定的问题 TCP/IP四层模型和OSI七层模型…
阅读更多...
DPPE-N3中叠氮基团使得DPPE-N3能够与含有炔基的材料在铜离子的催化下发生点击化学反应，生成稳定的1,2,3-三唑环结构，2252461-33-7

DPPE-N3中叠氮基团使得DPPE-N3能够与含有炔基的材料在铜离子的催化下发生点击化学反应，生成稳定的1,2,3-三唑环结构，2252461-33-7

一、基本信息 英文名称&#xff1a;DPPE-N3&#xff0c;DPPE-Azide 中文名称&#xff1a;DPPE-叠氮 CAS号&#xff1a;2252461-33-7 分子式&#xff1a;C43H83N4O9P 分子量&#xff1a;831.13 供应商&#xff1a;陕西新研博美生物科技 结构式&#xff1a; 二、结构特点…
阅读更多...
算法学习第一弹——C++基础

算法学习第一弹——C++基础

早上好啊&#xff0c;大佬们。来看看咱们这回学点啥&#xff0c;在前不久刚出完C语言写的PTA中L1的题目&#xff0c;想必大家都不过瘾&#xff0c;感觉那些题都不过如此&#xff0c;所以&#xff0c;为了我们能更好的去处理更难的题目&#xff0c;小白兔决定奋发图强&#xff0…
阅读更多...
[AcWing算法基础课]动态规划之01背包

[AcWing算法基础课]动态规划之01背包

题目链接&#xff1a;01背包 有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。第 i 件物品的体积是 vi&#xff0c;价值是 wi。求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容量&#xff0c;且总价值最大。输出最大价值。 首先&#xff0c;我们…
阅读更多...
FreeRTOS 24：事件组EventGroup等待、清零、获取操作

FreeRTOS 24：事件组EventGroup等待、清零、获取操作

等待事件标志位xEventGroupWaitBits() 既然标记了事件的发生&#xff0c;那么我怎么知道他到底有没有发生&#xff0c;这也是需要一个函数来获 取 事 件 是 否 已 经 发 生 &#xff0c; FreeRTOS 提 供 了 一 个 等 待 指 定 事 件 的 函 数 — — xEventGroupWaitBits()&…
阅读更多...
在线绘制带community的蛋白质-蛋白质相互作用（PPI）网络图

在线绘制带community的蛋白质-蛋白质相互作用（PPI）网络图

导读&#xff1a;分子相互作用网络图揭示了细胞内部分子间的复杂相互作用。通过识别网络中密集连接的节点所形成的社区&#xff08;community&#xff09;&#xff0c;可以揭示它们之间以前未知的功能联系。这些社区可能代表了具有共同功能的功能模块&#xff0c;对于理解细胞生…
阅读更多...
qt QTableView详解

qt QTableView详解

1、概述 QTableView 是 Qt 框架中的一个高级视图类&#xff0c;用于以表格形式展示二维数据。它基于 QAbstractItemView&#xff0c;并与模型&#xff08;通常是 QAbstractTableModel 或 QStandardItemModel&#xff09;结合使用&#xff0c;以实现数据的展示和交互。QTableVi…
阅读更多...
Orleans集群及Placement设置

Orleans集群及Placement设置

服务端界面使用相同的clusterid和serviceid&#xff0c;相同ip地址&#xff0c;不同网关端口号和服务端口号&#xff0c;启动两个silo服务&#xff0c;并使用MySql数据库做Silo间信息同步&#xff0c;实现集群。 silo服务启动代码如下&#xff08;从nuget下载Microsoft.Orleans…
阅读更多...
【Linux】 IPC 进程间通信（三）（消息队列 信号量）

【Linux】 IPC 进程间通信（三）（消息队列 信号量）

&#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;Linux—登神长阶 ⛺️ 欢迎关注&#xff1a;&#x1f44d;点赞 &#x1f442;&#x1f3fd;留言 &#x1f60d;收藏 &#x1f49e; &#x1f49e; &#x1f49e; 一、消息队列 &#x1f48c;…
阅读更多...
Docker：镜像构建 DockerFile

Docker：镜像构建 DockerFile

Docker&#xff1a;镜像构建 DockerFile 镜像构建docker build DockerfileFROMCOPYENVWORKDIRADDRUNCMDENTRYPOINTUSERARGVOLUME 镜像构建 在Docker官方提供的镜像中&#xff0c;大部分都是基础镜像&#xff0c;他们只提供某个简单的功能&#xff0c;如果想要一个功能更加丰富…
阅读更多...
遥控器数图控链路系统核心技术+算法详解

遥控器数图控链路系统核心技术+算法详解

一、核心技术 无线通信技术 遥控器数图控链路系统主要基于无线通信技术进行数据传输。通过特定的调制、编码和信号处理技术&#xff0c;将遥控器的操作指令转化为无线电信号&#xff0c;并传输给被控制设备。被控制设备接收到信号后&#xff0c;再将其解码为可识别的指令&…
阅读更多...
Kafka 源码 KRaft 模式本地运行

Kafka 源码 KRaft 模式本地运行

KRaft&#xff08;Kafka Raft Metadata mode&#xff09;&#xff0c;从版本 2.8.0 开始作为测试特性引入&#xff0c;并在后续版本中持续得到改进和增强。 KRaft 模式是指 Kafka 使用 Raft 协议来管理集群元数据的一种运行模式&#xff0c;这标志着 Kafka 向去除对 ZooKeeper …
阅读更多...
Android下的系统调用 (syscall)，内联汇编syscall

Android下的系统调用 (syscall)，内联汇编syscall

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ 什么是系统调用 (syscall) 系统调用是操作系统提供给应用程序的一组接口&#xff0c;允许用户空间程序与内核进行交互。 在 Android&#xff08;基于 Linux …
阅读更多...
RAGulator：如何识别和缓解大模型所谓的“忠实幻觉”

RAGulator：如何识别和缓解大模型所谓的“忠实幻觉”

RAGulator&#xff0c;一个轻量级的、用于检测RAG系统中语义上与上下文不符&#xff08;OOC&#xff09;的LLM生成文本的检测器 论文链接:https://arxiv.org/abs/2411.03920 论文概述 实时检测大型语言模型&#xff08;LLM&#xff09;生成的与上下文不符的输出问题&#xff…
阅读更多...
Git核心概念

Git核心概念

目录 版本控制 什么是版本控制 为什么要版本控制 本地版本控制系统 集中化的版本控制系统 分布式版本控制系统 认识Git Git简史 Git与其他版本管理系统的主要区别 Git的三种状态 Git使用快速入门 获取Git仓库 记录每次更新到仓库 一个好的 Git 提交消息如下&#…
阅读更多...
leetcode82：删除排序链表中的重复节点||

leetcode82：删除排序链表中的重复节点||

给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0c;只留下不同的数字 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,3,4,4,5] 输出&#xff1a;[1,2,5]示例 2&#xff1a; 输入&#xff1a;head [1,1,1,2…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023