Vue小案例（一）

news2025/1/15 16:42:42

目录

案例一：点击按钮切换图片

案例二：书架

案例三：成绩表

案例一：点击按钮切换图片

现在有5张图片，我想通过点击上一张 / 下一张的按钮来进行图片切换。

使用：v-bind、v-on、v-show

1、首先创建好Vue代码格式：

<!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="app">

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el:'#app',
            data
        })

    </script>
</body>
</html>

有5张图片，需要将其放入数组里，在data中创建数组和下标：

 创建2个按钮，上一张和下一张，以及相应的v-on事件：

中间还有图片的显示，需要v-bind动态设置img标签属性：

        <div>
            <img :src="list[index]" weight=300 height=300 alt="">
        </div>

效果：

点击按钮上下翻动图片就完成了，但是还有一个BUG。

当上一张到第1张位置时，再点上一张会出错，同样的下一张也是。

解决方式：用v-if 进行条件渲染（或者用v-show)

        <button v-if="index > 0"@click="index--">上一张</button>
        <div>
            <img :src="list[index]" weight=300 height=300 alt="">
        </div>
        <button v-if="index < list.length-1" @click="index++">下一张</button>

 这样到达第一张时“上一张”按钮就不会显示了，同理下一张处也是一样。

完整代码：

<!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="app">
        <button v-if="index > 0"@click="index--">上一张</button>
        <div>
            <img :src="list[index]" weight=300 height=300 alt="">
        </div>
        <button v-if="index < list.length-1" @click="index++">下一张</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                index:0,
                list:[
                    './0ff7d4d2be9bf8f4839c8196ea2dbba4(1).jpg',
                    './Cache_-2d6dd9d4c0077ac0_edit_658705122363551.jpg',
                    './Cache_3a7a27dc5e08e0ec.jpg',
                    './Cache_4ee7d712c4c9acf8_edit_658719846241153.jpg',
                    './mmexport1692814771342.jpg'
                ]
            }
        })

    </script>
</body>
</html>

案例二：书架

现在需要设计这么一个书架，并能够删除其中的书。

使用：

首先是用v-for循环渲染数组：

<body>
    <div id="app">
        <ul>
            <li v-for="item in bookList">
               <span>{{ item.name }}</span>
               <span>{{ item.author}}</span>
               <button>删除</button>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                bookList:[
                    {id:1,name:'红楼梦',author:'曹雪芹'},
                    {id:2,name:'西游记',author:'吴承恩'},
                    {id:3,name:'水浒传',author:'施耐庵'},
                    {id:4,name:'三国演义',author:'罗贯中'},
                ]
            }
        })
    </script>
</body>

 效果：

接下来实现删除功能。

首先还是用v-on注册事件，在button上设置点击事件，并且在data下方提供相应的methods：

删除就是将bookList对应的数组元素删除，那么del方法需要接收参数来确定删除哪一项。

上面传参传item.id，有id用id，不用数组下标。

下方方法体中用filter进行过滤：

<body>
    <div id="app">
        <ul>
            <li v-for="item in bookList" :key="item.id">
               <span>{{ item.name }}</span>
               <span>{{ item.author }}</span>
               <button @click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                bookList:[
                    {id:1,name:'红楼梦',author:'曹雪芹'},
                    {id:2,name:'西游记',author:'吴承恩'},
                    {id:3,name:'水浒传',author:'施耐庵'},
                    {id:4,name:'三国演义',author:'罗贯中'},
                ]
            },methods:{
                del(id){
                    this.bookList = this.bookList.filter(item => item.id !== id)
                }
            }
        })
    </script>
</body>

案例三：成绩表

创建图示这么个成绩表，包含三个科目及其编号成绩，显示总分和平均分，并可以进行添加成绩和删除成绩的操作(删除所有数据后显示暂无数据)。

1、首先，把基础框架搭建好，填入基础数据：

<!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="app" class="score-case">
        <div class="table">
            <table>
                <thead>
                    <td>编号</td>
                    <td>科目</td>
                    <td>成绩</td>
                    <td>操作</td>
                </thead>
                
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>语文</td>
                        <td class="red">46</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>英语</td>
                        <td class="red">80</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>数学</td>
                        <td class="red">70</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                </tbody>

                <tbody>
                    <tr>
                        <td colspan="5">
                            <span class="none">暂无数据</span>
                        </td>
                    </tr>
                </tbody>

                <tfoot>
                    <tr>
                        <td colspan="5">
                            <span>总分:250</span>
                            <span style="margin-left: 50px">平均分:60</span>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div class="form">
            <div class="form-item">
                <div class="label">科目:</div>
                <div class="input">
                    <input
                     type="text"
                     placeholder="请输入科目"
                     />
                </div>
            </div>
            <div class="form-item">
                <div class="label">分数:</div>
                <div class="input">
                    <input
                     type="text"
                     placeholder="请输入分数"
                     />
                </div>
            </div>
            <div class="form-item">
                <div class="label"></div>
                <div class="input">
                   <button class="submit">添加</button>
                </div>
            </div>
        </div>
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,subject:'语文',score:20},
                    {id:2,subject:'数学',score:90},
                    {id:3,subject:'英语',score:70}
                ],
                subject:"",
                score:""
            }
        })
    </script>
</body>
</html>

2、table中有2个tbody，分别对应有无数据的情况。那么就需要v-if 来进行条件渲染，注意这里不用v-show，因为v-show只是控制元素的显示隐藏，而不会真正控制元素节点的创建删除。

只需这样，就可以同时只出现一个tbody了：

3、渲染列表，用v-for实现，代码会变得简洁很多且容易控制：

                <tbody v-if="list.length > 0" v-for="(item,index) in list">
                    <tr>
                        <td> {{ index+1 }}</td>
                        <td>{{ item.subject }}</td>
                        <td class="red">{{ item.score }}</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                </tbody>

4、实现删除功能。用v-on注册点击事件，简写成@click，创建methods方法实现：

5、添加功能，需要先处理表单数据的双向绑定，这样才能拿到数据，用v-model：

 v-model.trim可以自动消除输入前后的空白，.number是将输入的字符串转成数字！

然后是注册点击事件，add方法添加数据，unshift是数据加到最前面：

严谨起见，还得判断输入的内容是否合规，并且在输入完后使得页面上的数据清除：

                    add(){
                        if(!this.subject){
                            alert('请输入科目')
                            return
                        }
                        if(typeof this.score != 'number'){
                            alert('请输入正确的成绩')
                            return
                        }
                        
                        this.list.unshift({
                            id: + new Date(), //时间戳
                            subject: this.subject,
                            score: this.score
                        })
                        this.subject = "",
                        this.score = ""
                    }
                }

6、计算总分、平均分。需要用到computed方法：

.toFixed(2)是保留两位小数的意思。

注意：当删除元素删完后，平均分会显示NAN，因为除法除数为0.

这里可以加一个判断：

 

完整代码：
 

<!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="app" class="score-case">
        <div class="table">
            <table>
                <thead>
                    <td>编号</td>
                    <td>科目</td>
                    <td>成绩</td>
                    <td>操作</td>
                </thead>
                
                <tbody v-if="list.length > 0" >
                    <tr v-for="(item,index) in list" :key="item.id">
                        <td style="border: 1px solid black"> {{ index+1 }}</td>
                        <td style="border: 1px solid black">{{ item.subject }}</td>
                        <td style="border: 1px solid black">{{ item.score }}</td>
                        <td style="border: 1px solid black"><a href="#" @click="del(item.id)">删除</a></td>
                    </tr>
                </tbody>

                <tbody v-else>
                    <tr>
                        <td style="border: 1px solid black" colspan="5">
                            <span class="none">暂无数据</span>
                        </td>
                    </tr>
                </tbody>

                <tfoot>
                    <tr>
                        <td style="border: 1px solid black" colspan="5">
                            <span>总分:{{ totalScore }}</span>
                            <span style="margin-left: 50px">平均分:{{ aveScore }}</span>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div class="form">
            <div class="form-item">
                <div class="label">科目:</div>
                <div class="input">
                    <input v-model.trim="subject"
                     type="text"
                     placeholder="请输入科目"
                     />
                </div>
            </div>
            <div class="form-item">
                <div class="label">分数:</div>
                <div class="input">
                    <input v-model.number="score"
                     type="text" 
                     placeholder="请输入分数"
                     />
                </div>
            </div>
            <div class="form-item">
                <div class="label"></div>
                <div class="input">
                   <button @click="add" class="submit">添加</button>
                </div>
            </div>
        </div>
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,subject:'语文',score:20},
                    {id:2,subject:'数学',score:90},
                    {id:3,subject:'英语',score:70}
                ],
                subject:'',
                score:''
            },
            computed:{
                totalScore(){
                    return this.list.reduce((sum,item)=>sum+item.score,0)                    
                },
                aveScore(){
                    if(this.list.length === 0) return 0
                    return (this.totalScore / this.list.length).toFixed(2);
                }
            },
            methods:{
                    del(id){
                        this.list = this.list.filter(item=>item.id !== id)
                    },
                    add(){
                        if(!this.subject){
                            alert('请输入科目')
                            return
                        }
                        if(typeof this.score !== 'number'){
                            alert('请输入正确的成绩')
                            return
                        }
                        
                        this.list.unshift({
                            id: +new Date(), //时间戳
                            subject: this.subject,
                            score: this.score
                        })
                        this.subject = '',
                        this.score = ''
                    }
                }

        })
    </script>
</body>
</html>

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

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

相关文章

使用FreeMarker导出word文档(支持循环导出实时多张图片)

使用FreeMarker导出word文档(支持循环导出实时多张图片)

续上一期的更新内容 &#xff0c;导出的是单张图片&#xff0c;直接在路径的src 里面填写对应的占位符&#xff0c;就可以了&#xff0c;随着需求的变化&#xff0c;那么今天我们继续往下写一个循环导出多张图片到word里面。 使用FreeMarker导出word文档(支持导出单张图片) …
阅读更多...
如何评估大语言模型是否可信？这里总结了七大维度

如何评估大语言模型是否可信？这里总结了七大维度

源自&#xff1a;机器之心发布 作者&#xff1a;刘扬&#xff0c;Kevin Yao 实际部署中&#xff0c;如何 “对齐”&#xff08;alignment&#xff09;大型语言模型&#xff08;LLM&#xff0c;Large Language Model&#xff09;&#xff0c;即让模型行为与人类意图相一致…
阅读更多...
荣耀推送服务业务介绍

荣耀推送服务业务介绍

概述 荣耀推送服务&#xff08;HONOR Push&#xff09;是荣耀公司向开发者提供的消息推送服务&#xff0c;通过服务端与客户端建立一条稳定、可靠的长连接通道&#xff0c;向荣耀手机系统上的APP应用客户端实时推送消息的服务。无论应用进程是否存在&#xff0c;均可正常收到消…
阅读更多...
【AIFEM案例教程】水轮机活动导叶强度分析

【AIFEM案例教程】水轮机活动导叶强度分析

AIFEM是由天洑自主研发的一款通用的智能结构仿真软件&#xff0c;助力用户解决固体结构相关的静力学、动力学、振动、热力学等实际工程问题&#xff0c;软件提供高效的前后处理工具和高精度的有限元求解器&#xff0c;帮助用户快速、深入地评估结构的力学性能&#xff0c;加速产…
阅读更多...
LAS Spark+云原生：数据分析全新解决方案

LAS Spark+云原生：数据分析全新解决方案

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 随着数据规模的迅速增长和数据处理需求的不断演进&#xff0c;云原生架构和湖仓分析成为了现代数据处理的重要趋势。在这个数字化时代&#xff0c;企业面临着海量数…
阅读更多...
leetcode:101.对称二叉树

leetcode:101.对称二叉树

借用二叉树是否相同的代码改动左右孩子相等对应关系&#xff0c;即为是否对称。 /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/bool isSameTree(struct TreeNode* p, struct Tr…
阅读更多...
纳米软件科普|什么是运放芯片?运放芯片测试方法是什么?

纳米软件科普|什么是运放芯片?运放芯片测试方法是什么?

运放芯片是一种电路元件&#xff0c;它可以用于信号放大、滤波、积分、微分等电路中。在多媒体音箱领域&#xff0c;运放芯片主要负责音量、音调和周边效果调节的运算功能。例如&#xff0c;音响中的前级和耳机放大器(耳放)中都会使用集成运算放大器。常见的运放芯片有OPA1612和…
阅读更多...
nvm 安装 node 安装不上 npm

nvm 安装 node 安装不上 npm

遇到一个问题 nvm install 18.18.2 node -v 安装上了 npm -v 发现没有安装上 解决办法 nvm -v 查看到自己的 nvm 版本号是 1.1.7 NVM下载 - NVM中文网 下载最新版本的 nvm .exe 文件 nvm list 查看手里 node 的所有版本 nvm uninstall 各个版本只保留一个最低版本 点…
阅读更多...
中文编程开发语言工具编程案例：计时计费管理系统软件连接灯控器编程案例

中文编程开发语言工具编程案例：计时计费管理系统软件连接灯控器编程案例

中文编程开发语言工具编程案例&#xff1a;计时计费管理系统软件连接灯控器编程案例 中文编程开发语言工具编程案例&#xff1a;计时计费管理系统软件连接灯控器编程案例 中文编程系统化教程&#xff0c;不需英语基础。学习链接 https://edu.csdn.net/course/detail/39036
阅读更多...
Messari发布Moonbeam简报，每日交易量稳步增长，首次公布利润数据

Messari发布Moonbeam简报，每日交易量稳步增长，首次公布利润数据

区块链数据公司Messari首次发布Moonbeam项目分析简报&#xff0c;从项目市值、链上数据表现、质押以及Moonbeam的技术优势XCM使用量等角度全面分析。这个再熊市初期上线的项目一直在默默开发&#xff0c;并在跨链互操作领域拥有了相当的实操成绩。我们翻译了Messari简报中的部分…
阅读更多...
分类预测 | Matlab实现WOA-BiLSTM鲸鱼算法优化双向长短期记忆神经网络的数据多输入分类预测

分类预测 | Matlab实现WOA-BiLSTM鲸鱼算法优化双向长短期记忆神经网络的数据多输入分类预测

分类预测 | Matlab实现WOA-BiLSTM鲸鱼算法优化双向长短期记忆神经网络的数据多输入分类预测 目录 分类预测 | Matlab实现WOA-BiLSTM鲸鱼算法优化双向长短期记忆神经网络的数据多输入分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现WOA-BiLSTM鲸鱼算法…
阅读更多...
AirPods Max奇特的关机模式！如何关闭AirPods Max

AirPods Max奇特的关机模式！如何关闭AirPods Max

对于一家专注于让事情变得更简单的公司来说&#xff0c;苹果已经把关闭最高端耳机这样的基本问题过于复杂了。耳机没有电源按钮。别担心&#xff1b;如果你想弄清楚情况&#xff0c;你并不孤单。今天&#xff0c;我们将教你如何关闭AirPods Max。 如何关闭AirPods Max AirPods…
阅读更多...
万界星空科技离散型制造企业MES解决方案

万界星空科技离散型制造企业MES解决方案

MES即制造企业生产过程执行系统,面向制造企业车间执行层的生产信息化管理系统。是精益生产、数字化工厂、智慧工厂的支撑平台。帮助企业对生产全流程进行管控并进行信息追溯,实现柔性化生产、精细化管理。 一、企业生产场景总览: 二、MES系统架构图: 帮助企业实现制造执行自动…
阅读更多...
QT的QStringList的使用

QT的QStringList的使用

初始 化 默认构造函数创建一个空列表。可以使用初始值设定项列表构造函数创建包含元素的列表&#xff1a; QStringList fonts { "Arial", "Helvetica", "Times" }; 添加字符串 可以使用insert 、append&#xff08;&#xff09; 和 operator…
阅读更多...
CH7-任务管理

CH7-任务管理

7.1 任务管理概述&#xff08;TASK MANAGEMENT OVERVIEW&#xff09; 什么是任务&#xff1f; 任务是操作系统中的一个基本执行单位&#xff0c;可以是一个进程或者一个线程&#xff0c;代表了系统中的一个活动。 80x86 提供了哪些硬件支持&#xff1f; 80x86 提供了任务状态段…
阅读更多...
解决IDEA中SpringBoot项目创建多个子模块时配置文件小绿叶图标异常问题

解决IDEA中SpringBoot项目创建多个子模块时配置文件小绿叶图标异常问题

在新建子模块下创建配置文件&#xff1a; 在子模块gateway中新建的配置文件,正常情况下配置文件左侧是小树叶标识&#xff0c;而这次新建application-dev.yml是个小树叶标识&#xff0c;bootstrap.yml是个方框。 看其他方案都是在project structure中设置&#xff0c;但未显示…
阅读更多...
HTML 表单笔记/练习

HTML 表单笔记/练习

表单 概述 表单用于收集用户信息&#xff0c;用户填写表单提交到服务器 一般传参方式&#xff1a; GETPOSTCookie 传参要素 传参方式 GETPOST 参数的名字目标页面内容的数据类型&#xff08;只有在上传文件的时候&#xff09; 提示信息 一个表单中通常还包含一些说明性的文…
阅读更多...
如何从一门编程语言过渡到另一门编程语言？

如何从一门编程语言过渡到另一门编程语言？

在数字时代&#xff0c;软件开发领域不断进化&#xff0c;不同编程语言层出不穷。作为一位富有经验的开发者&#xff0c;你可能曾面临过一个重要的问题&#xff1a;如何顺利过渡到一门全新的编程语言&#xff1f; 这个问题不仅是对技术领域的学习&#xff0c;更是对职业生涯的…
阅读更多...
哨兵1号后向散射系数土壤水分反演

哨兵1号后向散射系数土壤水分反演

哨兵1号后向散射系数土壤水分反演 数据导入 打开之前预处理之后的VH和VV极化的后向散射系数转存的tiff文件 导入实测点 选择KML转图层 kml文件是由奥维地图导出的.ovkml格式改后缀名得到的 提取采样点的后向散射系数 选择多值提取至点 右键打开点图层的属性表，发现…
阅读更多...
2000年至2017年LandScan全球人口分布数据（1KM分辨率）

2000年至2017年LandScan全球人口分布数据（1KM分辨率）

简介&#xff1a; LandScan全球人口分布数据来自于East View Cartographic&#xff0c;由美国能源部橡树岭国家实验室(ORNL)开发。LandScan运用GIS和遥感等创新方法&#xff0c;是全球人口数据发布的社会标准&#xff0c;是全球最为准确、可靠&#xff0c;基于地理位置的&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023