案例需求:

创建一个品牌展示表格,表头有编号(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小案例(一)的更多相关文章

  1. Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式

    代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...

  2. vue小案例--简易评论区

    一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...

  3. VUE小案例--简易计算器

    这个小案例主要时练习v-model的使用,功能并不完善 <!DOCTYPE html> <html lang="zh-CN"> <head> & ...

  4. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  5. Vue(小案例_vue+axios仿手机app)_go实现退回上一个路由

    一.前言 this.$router.go(-1)返回上级路由 二.主要内容 1.小功能演示: 2.组件之间的嵌套关系为: 3.具体实现 (1)由于这种返回按钮在每个页面中的结构都是一样的,只是里面的数 ...

  6. Vue(小案例_vue+axios仿手机app)_Vuex优化购物车功能

    一.前言         1.用vuex实现加入购物车操作 2.购物车详情页面          3.点击删除按钮,删除购物详情页面里的对应商品 二.主要内容 1.用vuex加入购物车 (1)在src ...

  7. Vue(小案例_vue+axios仿手机app)_购物车(二模拟淘宝购物车页面,点击加减做出相应变化)

    一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变                                         ...

  8. Vue(小案例_vue+axios仿手机app)_购物车

    一.前言 1.购物车 二.主要内容 1.效果演示如下,当我们选择商品数量改变的时候,也要让购物车里面的数据改变 2.具体实现 (1)小球从上面跳到下面的效果 (2)当点击上面的“加入购物车按钮”让小球 ...

  9. Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)

    一.前言                    1.公共轮播图的实现                    2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...

随机推荐

  1. 洛谷 P5238 整数校验器

    题目描述 有些时候需要解决这样一类问题:判断一个数 x 是否合法. x 合法当且仅当其满足如下条件: x 格式合法,一个格式合法的整数要么是 0,要么由一个可加可不加的负号,一个 1 到 9 之间的数 ...

  2. C#通过反射执行C#dll所有函数

    C# 反射(Reflection) 反射指程序可以访问.检测和修改它本身状态或行为的一种能力. 程序集包含模块,而模块包含类型,类型又包含成员.反射则提供了封装程序集.模块和类型的对象. 您可以使用反 ...

  3. Docker实战:更轻松、更愉快、更高效

    编者按:借助Docker,我们可以更容易地进行web应用部署,而同时不必头疼于项目依赖.环境变量以及各种配置问题,Docker可以快捷.高效地处理好这一切.而这也是本教程所要实现的主要目的.以下是作者 ...

  4. UVM系统验证基础知识0(Questasim搭建第一个UVM环境)

    版权声明:本文为Times_poem原创文章,转载请告知原博主.特别声明:本文在原文基础上做了简单修改以适应文中举例在questasim下的运行,敬请原博主谅解. 需求说明:UVM系统验证 内容   ...

  5. 747_Largest-Number-At-Least-Twice-of-Others

    目录 747_Largest-Number-At-Least-Twice-of-Others Description Solution Java solution Python solution 74 ...

  6. 类class思维导图

  7. 优化SQLServer

    由于SQLServer,数据文件mdf过大,造成系统异常卡 一. 更改隔离级别 ALTER DATABASE [B2EC] SET SINGLE_USER WITH ROLLBACK IMMEDIAT ...

  8. java.lang.SecurityException: Permission Denial: reading com.android.providers.media.MediaProvider uri content://media/external/images/media/20 from pid=711, uid=10074 requires android.permission.READ_

    java.lang.SecurityException: Permission Denial: reading com.android.providers.media.MediaProvider ur ...

  9. 01-Web客户端与服务器详解

    1.CS与BS 软件使用方式上两种划分 C/S架构 Client/ServerPC客户端.服务器架构 特点: 在服务器当中就主要是一个数据库,把所有的业务逻辑以及界面都交给客户端完成 优点: 较为安全 ...

  10. 基于easyUI实现登录界面

    此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 准备工作 1. 点击此下载相关文件,并把文件放到 ims 工程对应的文件夹下 二. 相关文件介绍 1. login.jsp: ...