Vue小案例（一）
案例需求：
创建一个品牌展示表格，表头有编号（id），品牌名称（name），创建时间（time）和操作，需要实现的功能是对数据的增删操作，和时间的格式化。
思路分析：
在开发之前需要想清楚要用到Vue中的什么方法或者特性来实现所要的功能，把案例分成以下几个部分来开发：
- 展示数据，需要使用v-for指令
- 删除数据，需要使用v-on绑定一个事件
- 添加数据，需要使用双向数据绑定
- 时间的格式化，需要使用过滤器
实现步骤：
1、开发静态模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="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="app">
<div class="box">
<div class="left">
<input type="text" placeholder="输入编号" />
<input type="text" placeholder="输入名称" /><br />
<input type="button" value="添加数据" />
</div>
<div class="right">
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>宝马</td>
<td>2017-12-27</td>
<td>
<a href="javascript:void(0)">删除</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
2、使用v-for指令展示数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="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="app">
<div class="box">
<div class="left">
<input type="text" placeholder="输入编号" />
<input type="text" placeholder="输入名称" /><br />
<input type="button" value="添加数据" />
</div>
<div class="right">
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td>
<a href="javascript:void(0)">删除</a>
</td>
</tr>
</table>
</div>
</div>
</div> <script>
var vm = new Vue({
el:'#app',
data:{
list:[
{"id":1,"name":"宝马","time":new Date()},
{"id":2,"name":"奔驰","time":new Date()}
]
}
})
</script>
</body>
</html>
3、删除数据，在methods中定义删除方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="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="app">
<div class="box">
<div class="left">
<input type="text" placeholder="输入编号" />
<input type="text" placeholder="输入名称" /><br />
<input type="button" value="添加数据" />
</div>
<div class="right">
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td>
<a href="javascript:void(0)" @click="del(item.id)">删除</a>
</td>
</tr>
</table>
</div>
</div>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
list: [{
"id": 1,
"name": "宝马",
"time": new Date()
},
{
"id": 2,
"name": "奔驰",
"time": new Date()
}
]
},
methods: {
del: function (id) {
if (!confirm("是否删除数据？")) {
return;
}
//调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function (item) {
return item.id == id;
});
//调用list.splice(删除的索引，删除的元素个数)
this.list.splice(index, 1);
}
}
})
</script>
</body>
</html>
4、添加数据，使用双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="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="app">
<div class="box">
<div class="left">
<input type="text" placeholder="输入编号" v-model="id" />
<input type="text" placeholder="输入名称" v-model="name" /><br />
<input type="button" value="添加数据" @click="add" />
</div>
<div class="right">
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td>
<a href="javascript:void(0)" @click="del(item.id)">删除</a>
</td>
</tr>
</table>
</div>
</div>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [{
"id": 1,
"name": "宝马",
"time": new Date()
},
{
"id": 2,
"name": "奔驰",
"time": new Date()
}
]
},
methods: {
del: function (id) {
if (!confirm("是否删除数据？")) {
return;
}
//调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function (item) {
return item.id == id;
});
//调用list.splice(删除的索引，删除的元素个数)
this.list.splice(index, 1);
},
add: function () {
//包装成list要求的对象
var tem = {
id: this.id,
name: this.name,
time: new Date().toLocaleString()
};
//将tem追加到list数组中
this.list.push(tem);
//清空页面上的文本框中的数据
this.id = "";
this.name = "";
}
}
})
</script>
</body>
5、格式化时间，使用过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="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="app">
<div class="box">
<div class="left">
<input type="text" placeholder="输入编号" v-model="id" />
<input type="text" placeholder="输入名称" v-model="name" /><br />
<input type="button" value="添加数据" @click="add" />
</div>
<div class="right">
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time | datefmt('yyyy-mm-dd HH:mm:ss')}}</td>
<td>
<a href="javascript:void(0)" @click="del(item.id)">删除</a>
</td>
</tr>
</table>
</div>
</div>
</div> <script>
//定义全局过滤器
Vue.filter("datefmt", function (input, formatstring) {
var result = "";
var year = input.getFullYear();
var month = input.getMonth() + 1;
var day = input.getDate();
var hour = input.getHours();
hour = hour < 10 ? "0" + hour : hour;
var minute = input.getMinutes();
minute = minute < 10 ? "0" + minute : minute;
if (formatstring == 'yyyy-mm-dd') {
result = year + "-" + month + "-" + day;
} else {
result = year + "-" + month + "-" + day + " " + hour + ":" + minute;
}
return result;
})
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [{
"id": 1,
"name": "宝马",
"time": new Date()
},
{
"id": 2,
"name": "奔驰",
"time": new Date()
}
]
},
methods: {
del: function (id) {
if (!confirm("是否删除数据？")) {
return;
}
//调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function (item) {
return item.id == id;
});
//调用list.splice(删除的索引，删除的元素个数)
this.list.splice(index, 1);
},
add: function () {
//包装成list要求的对象
var tem = {
id: this.id,
name: this.name,
time: new Date()
};
//将tem追加到list数组中
this.list.push(tem);
//清空页面上的文本框中的数据
this.id = "";
this.name = "";
}
}
})
</script>
</body>
</html>
至此，一个关于Vue的小案例开发就成功开发了，是不是非常的简单？
6、增加搜索数据功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="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="app">
<div class="box">
<div class="left">
<input type="text" placeholder="输入编号" v-model="id" />
<input type="text" placeholder="输入名称" v-model="name" /><br />
<input type="button" value="添加数据" @click="add" />
<input type="text" placeholder="搜索数据" v-model="search" />
</div>
<div class="right">
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in searchData">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time | datefmt('yyyy-mm-dd HH:mm:ss')}}</td>
<td>
<a href="javascript:void(0)" @click="del(item.id)">删除</a>
</td>
</tr>
</table>
</div>
</div>
</div> <script>
//定义全局过滤器
Vue.filter("datefmt", function (input, formatstring) {
var result = "";
var year = input.getFullYear();
var month = input.getMonth() + 1;
var day = input.getDate();
var hour = input.getHours();
hour = hour < 10 ? "0" + hour : hour;
var minute = input.getMinutes();
minute = minute < 10 ? "0" + minute : minute;
if (formatstring == 'yyyy-mm-dd') {
result = year + "-" + month + "-" + day;
} else {
result = year + "-" + month + "-" + day + " " + hour + ":" + minute;
}
return result;
})
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
search: '',
list: [{
"id": 1,
"name": "宝马",
"time": new Date()
},
{
"id": 2,
"name": "奔驰",
"time": new Date()
}
]
},
methods: {
del: function (id) {
if (!confirm("是否删除数据？")) {
return;
}
//调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function (item) {
return item.id == id;
});
//调用list.splice(删除的索引，删除的元素个数)
this.list.splice(index, 1);
},
add: function () {
//包装成list要求的对象
var tem = {
id: this.id,
name: this.name,
time: new Date()
};
//将tem追加到list数组中
this.list.push(tem);
//清空页面上的文本框中的数据
this.id = "";
this.name = "";
}
},
computed: {
searchData: function () {
var search = 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>
Vue小案例（一）的更多相关文章
- Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式
代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...
- vue小案例--简易评论区
一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...
- VUE小案例--简易计算器
这个小案例主要时练习v-model的使用,功能并不完善 <!DOCTYPE html> <html lang="zh-CN"> <head> & ...
- VUE小案例--跑马灯效果
自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
- Vue(小案例_vue+axios仿手机app)_go实现退回上一个路由
一.前言 this.$router.go(-1)返回上级路由 二.主要内容 1.小功能演示: 2.组件之间的嵌套关系为: 3.具体实现 (1)由于这种返回按钮在每个页面中的结构都是一样的,只是里面的数 ...
- Vue(小案例_vue+axios仿手机app)_Vuex优化购物车功能
一.前言 1.用vuex实现加入购物车操作 2.购物车详情页面 3.点击删除按钮,删除购物详情页面里的对应商品 二.主要内容 1.用vuex加入购物车 (1)在src ...
- Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）
一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变 ...
- Vue(小案例_vue+axios仿手机app)_购物车
一.前言 1.购物车 二.主要内容 1.效果演示如下,当我们选择商品数量改变的时候,也要让购物车里面的数据改变 2.具体实现 (1)小球从上面跳到下面的效果 (2)当点击上面的“加入购物车按钮”让小球 ...
- Vue(小案例_vue+axios仿手机app)_公共组件（路由组件传参）
一.前言 1.公共轮播图的实现 2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...
随机推荐
- loj 6433 「PKUSC2018」最大前缀和 题解【DP】【枚举】【二进制】【排列组合】
这是个什么集合DP啊- 想过枚举断点但是不会处理接下来的问题了- 我好菜啊 题目描述 小 C 是一个算法竞赛爱好者,有一天小 C 遇到了一个非常难的问题:求一个序列的最大子段和. 但是小 C 并不会做 ...
- JDK下载安装以及环境变量的配置
JDK是Java Development Kit 的缩写,是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序. 一.JDK的下载 这里以Oracle官网下载为例 1. ...
- Eclipse 安装spring插件spring tool suite(STS)
安装方法有2种,一种是在线安装,比较方便,但耗时较长,一种是离线安装,步骤复杂一些,但耗时少,下面请看详细步骤. 方法一:在线安装 1:打开eclipse菜单Help>Eclise Ma ...
- redis之 集群配置（主从复制）
集群的作用: 集群的方式有二种: 第二种的好处是:master宕机以后可以直接切换到slave1 主从通信的过程 先通过dump导出大块的rdb 然后把aof缓冲过来,然后通过replicationf ...
- Python案例之QQ空间自动登录程序实现
不多说,直接上干货! 工具选择: 电脑系统:win7,32 位,下面第二部安装SetupTools时注意系统版本要求: Python: 2.7.11, 相信只要是2.7的就可以实现: Seleniu ...
- Install Papirus Icon Theme on Ubuntu
sudo add-apt-repository ppa:papirus/papirus sudo apt update && sudo apt install papirus-icon ...
- C#删除只读文件
File.SetAttributes(fileRealPath, FileAttributes.Normal);//先将文件设置成普通属性 //...你的删除文件的代码
- Java 中 String 的常用方法（一）
上一篇介绍了 String 中的几个常用构造方法,由 String 这个核心对象发散出去关于字符的编码,字符的字节表达,对 GC 的影响,正则表达式,模式匹配,这可能是 Java 里内涵最丰富的对象了 ...
- [转载]二叉树（BST，AVT，RBT）
二叉查找树(Binary Search Tree)是满足如下性质的二叉树:①若它的左子树非空,则左子树上所有结点的值均小于根结点的值:②若它的右子树非空,则右子树上所有结点的值均大于根结点的值:③左. ...
- module使用和设置
Modules environmentDescription This is a system that allows you to easily change between different v ...