Vue小案例（一）

作者：普罗土 | 来源：互联网 | 2023-09-23 18:57

案例需求：创建一个品牌展示表格，表头有编号（id），品牌名称（name）ÿ

案例需求&＃xff1a;

创建一个品牌展示表格&＃xff0c;表头有编号&＃xff08;id&＃xff09;&＃xff0c;品牌名称&＃xff08;name&＃xff09;&＃xff0c;创建时间&＃xff08;time&＃xff09;和操作&＃xff0c;需要实现的功能是对数据的增删操作&＃xff0c;和时间的格式化。

思路分析&＃xff1a;
在开发之前需要想清楚要用到Vue中的什么方法或者特性来实现所要的功能&＃xff0c;把案例分成以下几个部分来开发&＃xff1a;

展示数据&＃xff0c;需要使用v-for指令
删除数据&＃xff0c;需要使用v-on绑定一个事件
添加数据&＃xff0c;需要使用双向数据绑定
时间的格式化&＃xff0c;需要使用过滤器

实现步骤&＃xff1a;

1、开发静态模板

View Code

2、使用v-for指令展示数据

View Code

3、删除数据&＃xff0c;在methods中定义删除方法

View Code

4、添加数据&＃xff0c;使用双向数据绑定

View Code

5、格式化时间&＃xff0c;使用过滤器

DOCTYPE html>
<html><head><meta charset&＃61;"UTF-8"><title>title><script src&＃61;"https://cdn.jsdelivr.net/npm/vue">script><style>.box {width: 900px;height: auto;overflow: hidden;margin: 30px auto;}.left {height: 150px;width: 185px;padding: 5px;display: inline-block;border: 1px solid black;}.left input {padding: 2px;margin-top: 10px;}.right {width: 600px;height: auto;display: inline-block;margin-left: 30px;vertical-align: top;}.right table {border-collapse: collapse;width: 580px;}.right table th {background-color: green;padding: 5px;text-align: center;border: 1px solid black;color: #FFFFFF;}.right table tr {text-align: center;}.right table td {border: 1px solid black;}style>head><body><div id&＃61;"app"><div class&＃61;"box"><div class&＃61;"left"><input type&＃61;"text" placeholder&＃61;"输入编号" v-model&＃61;"id" /><input type&＃61;"text" placeholder&＃61;"输入名称" v-model&＃61;"name" /><br /><input type&＃61;"button" value&＃61;"添加数据" &＃64;click&＃61;"add" />div><div class&＃61;"right"><table><tr><th>编号th><th>品牌名称th><th>创建时间th><th>操作th>tr><tr v-for&＃61;"item in list"><td>{{item.id}}td><td>{{item.name}}td><td>{{item.time | datefmt(&＃39;yyyy-mm-dd HH:mm:ss&＃39;)}}td><td><a href&＃61;"Javascript:void(0)" &＃64;click&＃61;"del(item.id)">删除a>td>tr>table>div>div>div><script>//定义全局过滤器
Vue.filter("datefmt", function (input, formatstring) {var result &＃61; "";var year &＃61; input.getFullYear();var month &＃61; input.getMonth() &＃43; 1;var day &＃61; input.getDate();var hour &＃61; input.getHours();hour &＃61; hour < 10 ? "0" &＃43; hour : hour;var minute &＃61; input.getMinutes();minute &＃61; minute < 10 ? "0" &＃43; minute : minute;if (formatstring &＃61;&＃61; &＃39;yyyy-mm-dd&＃39;) {result &＃61; year &＃43; "-" &＃43; month &＃43; "-" &＃43; day;} else {result &＃61; year &＃43; "-" &＃43; month &＃43; "-" &＃43; day &＃43; " " &＃43; hour &＃43; ":" &＃43; minute;}return result;})var vm &＃61; new Vue({el: &＃39;#app&＃39;,data: {id: &＃39;&＃39;,name: &＃39;&＃39;,list: [{"id": 1,"name": "宝马","time": new Date()},{"id": 2,"name": "奔驰","time": new Date()}]},methods: {del: function (id) {if (!confirm("是否删除数据&＃xff1f;")) {return;}//调用list.findIndex()方法&＃xff0c;根据传入的id获取到这个要删除数据的索引值var index &＃61; this.list.findIndex(function (item) {return item.id &＃61;&＃61; id;});//调用list.splice(删除的索引&＃xff0c;删除的元素个数)this.list.splice(index, 1);},add: function () {//包装成list要求的对象var tem &＃61; {id: this.id,name: this.name,time: new Date()};//将tem追加到list数组中this.list.push(tem);//清空页面上的文本框中的数据this.id &＃61; "";this.name &＃61; "";}}})script>body>
html>

View Code

至此&＃xff0c;一个关于Vue的小案例开发就成功开发了&＃xff0c;是不是非常的简单&＃xff1f;

6、增加搜索数据功能

DOCTYPE html>
<html><head><meta charset&＃61;"UTF-8"><title>title><script src&＃61;"https://cdn.jsdelivr.net/npm/vue">script><style>.box {width: 900px;height: auto;overflow: hidden;margin: 30px auto;}.left {height: 150px;width: 185px;padding: 5px;display: inline-block;border: 1px solid black;}.left input {padding: 2px;margin-top: 10px;}.right {width: 600px;height: auto;display: inline-block;margin-left: 30px;vertical-align: top;}.right table {border-collapse: collapse;width: 580px;}.right table th {background-color: green;padding: 5px;text-align: center;border: 1px solid black;color: #FFFFFF;}.right table tr {text-align: center;}.right table td {border: 1px solid black;}style>head><body><div id&＃61;"app"><div class&＃61;"box"><div class&＃61;"left"><input type&＃61;"text" placeholder&＃61;"输入编号" v-model&＃61;"id" /><input type&＃61;"text" placeholder&＃61;"输入名称" v-model&＃61;"name" /><br /><input type&＃61;"button" value&＃61;"添加数据" &＃64;click&＃61;"add" /><input type&＃61;"text" placeholder&＃61;"搜索数据" v-model&＃61;"search" />div><div class&＃61;"right"><table><tr><th>编号th><th>品牌名称th><th>创建时间th><th>操作th>tr><tr v-for&＃61;"item in searchData"><td>{{item.id}}td><td>{{item.name}}td><td>{{item.time | datefmt(&＃39;yyyy-mm-dd HH:mm:ss&＃39;)}}td><td><a href&＃61;"Javascript:void(0)" &＃64;click&＃61;"del(item.id)">删除a>td>tr>table>div>div>div><script>//定义全局过滤器
Vue.filter("datefmt", function (input, formatstring) {var result &＃61; "";var year &＃61; input.getFullYear();var month &＃61; input.getMonth() &＃43; 1;var day &＃61; input.getDate();var hour &＃61; input.getHours();hour &＃61; hour < 10 ? "0" &＃43; hour : hour;var minute &＃61; input.getMinutes();minute &＃61; minute < 10 ? "0" &＃43; minute : minute;if (formatstring &＃61;&＃61; &＃39;yyyy-mm-dd&＃39;) {result &＃61; year &＃43; "-" &＃43; month &＃43; "-" &＃43; day;} else {result &＃61; year &＃43; "-" &＃43; month &＃43; "-" &＃43; day &＃43; " " &＃43; hour &＃43; ":" &＃43; minute;}return result;})var vm &＃61; new Vue({el: &＃39;#app&＃39;,data: {id: &＃39;&＃39;,name: &＃39;&＃39;,search: &＃39;&＃39;,list: [{"id": 1,"name": "宝马","time": new Date()},{"id": 2,"name": "奔驰","time": new Date()}]},methods: {del: function (id) {if (!confirm("是否删除数据&＃xff1f;")) {return;}//调用list.findIndex()方法&＃xff0c;根据传入的id获取到这个要删除数据的索引值var index &＃61; this.list.findIndex(function (item) {return item.id &＃61;&＃61; id;});//调用list.splice(删除的索引&＃xff0c;删除的元素个数)this.list.splice(index, 1);},add: function () {//包装成list要求的对象var tem &＃61; {id: this.id,name: this.name,time: new Date()};//将tem追加到list数组中this.list.push(tem);//清空页面上的文本框中的数据this.id &＃61; "";this.name &＃61; "";}},computed: {searchData: function () {var search &＃61; this.search;if (search) {return this.list.filter(function (name) {return Object.keys(name).some(function (key) {return String(name[key]).toLowerCase().indexOf(search) > -1})})}return this.list;}}})script>body>
html>

View Code

转:https://www.cnblogs.com/fengxiongZz/p/8126796.html

推荐阅读

int
Android开发笔记：使用Picasso加载网络图片等比例缩放

在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ... [详细]

蜡笔小新 2023-12-14 17:34:00
int
Nginx使用（server参数配置）

本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]

蜡笔小新 2023-12-14 17:08:34
int
Android 新闻App的本地服务器搭建教程

本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

蜡笔小新 2023-12-14 17:15:19
int
向QTextEdit拖放文件的方法及实现步骤

本文介绍了在使用QTextEdit时如何实现拖放文件的功能，包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数，并结合QMimeData和QUrl等类，可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]

蜡笔小新 2023-12-14 16:06:38
int
实现下拉列表，点击其他位置自动隐藏效果的三种方式比较

目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]

蜡笔小新 2023-12-14 15:03:14
int
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
email
Redis数据结构之string应用场景解析

本文介绍了Redis的基础数据结构string的应用场景，并以面试的形式进行问答讲解，帮助读者更好地理解和应用Redis。同时，描述了一位面试者的心理状态和面试官的行为。 ... [详细]

蜡笔小新 2023-12-14 14:02:42
int
九度OnlineJudge之1002：Grading问题的解决方法

本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程，将每个考题分配给3个独立的专家，如果他们的评分不一致，则需要请一位裁判做出最终决定。文章详细描述了评分规则，并给出了解决该问题的程序。 ... [详细]

蜡笔小新 2023-12-14 13:00:09
jar
SpringBoot yml 配置多配置文件,开发环境,生产环境配置文件分开

原文地址:https:www.cnblogs.combaoyipSpringBoot_YML.html1.在springboot中，有两种配置文件，一种 ... [详细]

蜡笔小新 2023-12-14 12:39:13
import
javascript – 概述在Firefox上无法正常工作

我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]

蜡笔小新 2023-12-14 10:20:38
config
Oracle中tnsnames.ora的作用和配置方法

本文介绍了Oracle数据库中tnsnames.ora文件的作用和配置方法。tnsnames.ora文件在数据库启动过程中会被读取，用于解析LOCAL_LISTENER，并且与侦听无关。文章还提供了配置LOCAL_LISTENER和1522端口的示例，并展示了listener.ora文件的内容。 ... [详细]

蜡笔小新 2023-12-14 07:44:06
replace
Java String与StringBuffer的区别及其应用场景

本文主要介绍了Java中String和StringBuffer的区别，String是不可变的，而StringBuffer是可变的。StringBuffer在进行字符串处理时不生成新的对象，内存使用上要优于String类。因此，在需要频繁对字符串进行修改的情况下，使用StringBuffer更加适合。同时，文章还介绍了String和StringBuffer的应用场景。 ... [详细]

蜡笔小新 2023-12-13 19:21:06
client
使用多进程实现TCP服务端的优势和注意事项

本文介绍了为什么要使用多进程处理TCP服务端，多进程的好处包括可靠性高和处理大量数据时速度快。然而，多进程不能共享进程空间，因此有一些变量不能共享。文章还提供了使用多进程实现TCP服务端的代码，并对代码进行了详细注释。 ... [详细]

蜡笔小新 2023-12-13 18:25:30
client
计算机存储系统的层次结构及其优势

本文介绍了计算机存储系统的层次结构，包括高速缓存、主存储器和辅助存储器三个层次。通过分层存储数据可以提高程序的执行效率。计算机存储系统的层次结构将各种不同存储容量、存取速度和价格的存储器有机组合成整体，形成可寻址存储空间比主存储器空间大得多的存储整体。由于辅助存储器容量大、价格低，使得整体存储系统的平均价格降低。同时，高速缓存的存取速度可以和CPU的工作速度相匹配，进一步提高程序执行效率。 ... [详细]

蜡笔小新 2023-12-13 17:32:41
int
Python正则表达式学习记录及常用方法

本文记录了学习Python正则表达式的过程，介绍了re模块的常用方法re.search，并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具，通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]

蜡笔小新 2023-12-13 16:37:19

普罗土

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章