vue实现商品列表的添加删除实例讲解


Posted in Javascript onMay 14, 2020

我们首先来看下代码:

<div id="app">
<div class="container"><form class="form-inline">
<div class="form-group"><label for="exampleInputName2">ID:</label> <input id="exampleInputName2" class="form-control" type="text" /></div>
<div class="form-group"><label for="exampleInputEmail2">Name:</label> <input class="form-control" type="text" /></div>
<button class="btn btn-primary" type="button">提交</button></form>
<table class="table table-hover table-striped">
<tbody>
<tr>
<td>ID</td>
<td>品牌名称</td>
<td>添加时间</td>
<td>操作</td>
</tr>
<tr>
<td>{{item.id}}</td>
<td>{{item.pp_name}}</td>
<td>{{item.add_time | getTime()}}</td>
<td><a>删除</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">// <![CDATA[
var app = new Vue({
el: '#app',
data: {
id : '',
name : '',
list : [
{id : 1, pp_name : '安踏', add_time : new Date()},
{id : 2, pp_name : '李宁', add_time : new Date()},
{id : 3, pp_name : '捷豹', add_time : new Date()},
{id : 4, pp_name : '悍马', add_time : new Date()}
]
},
methods: {
add : function(){
// 数据插入数组操作
this.list.push({id : this.id, pp_name : this.name, add_time : new Date()});
this.id = this.name = ''
},

/* 
根据id删除数据

分析: 先要找到这一项数据的id,然后根据id删除索引
找到索引之后直接调用数组的splice方法
*/
del : function(id){
this.list.some((item,i) =>{
if(item.id === id){
this.list.splice(i,1);

// 在数组some中 如果返回值为true,则会立即终止后续的循环
return true;
}
})
}
},
// 时间的过滤
filters:{
getTime:function(value){
let date = new Date(value),
Y = date.getFullYear(),
m = date.getMonth() + 1,
d = date.getDate(),
h = date.getHours(),
min = date.getMinutes(),
s = date.getSeconds();
if(m<10){m = '0' +m;}
if(d<10){d = '0' +d;}
if(h<10){h = '0' +h;}
if(min<10){min = '0' +min;}
if(s<10){s = '0' +s;}

let t = Y + '-' + m + '-' + d + ' | ' + h + ':' + min + ':' + s;
return t;
}
}

})

// ]]></script>

内容补充:

vue中注册组件,实现列表的添加删除效果

1、首先在html的<code><head>标签中</code>导入vue.js

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

2、在body中创建一个应用vue模板的容器

// vue起作用的区域root
<div id="root">
// input与mesg数据绑定
<input v-model="mesg" />
<button @click="handle">提交</button>
<ul>
<todo-item v-for='(item,index) in list' :key='index' :index='index' :content='item' @delete='deletes'></todo-item>
</ul>
</div>

3、在script标签中创建并注册名为todo-item的组件

Vue.component('todo-item', {
props: ['content', 'index'],
template: '<li @click="handelClick">{{content}}</li>',
methods: {
handelClick: function() {
//点击li元素就触发delete方法
this.$emit('delete', this.index);
}
}
})

4、在script标签中初始化vue实例

new Vue({
el: '#root',
data() {
return {
list: [],
mesg: ''
}
},
methods: {
//点击提交按钮,输入文本信息就加入列表
handle: function() {
if(this.mesg==''){
return;
}
this.list.push(this.mesg);
this.mesg = ''
},
deletes: function(index) {
alert(index)
this.list.splice(index, 1);
}
}
})

到此这篇关于vue实现商品列表的添加删除实例讲解的文章就介绍到这了,更多相关vue商品列表添加删除内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中的document.open()方法使用介绍
Oct 09 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
Vue 自适应高度表格的实现方法
May 13 #Javascript
ES6函数实现排它两种写法解析
May 13 #Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 #Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 #Javascript
原生JS实现汇率转换功能代码实例
May 13 #Javascript
JavaScript Tab菜单实现过程解析
May 13 #Javascript
JQuery事件冒泡和默认行为代码实例
May 13 #jQuery
You might like
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
Js四则运算函数代码
2012/07/21 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
python设置检查点简单实现代码
2014/07/01 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
PyTorch中的Variable变量详解
2020/01/07 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
python如何将图片转换素描画
2020/09/08 Python
Python排序函数的使用方法详解
2020/12/11 Python
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
客服工作职责
2013/12/11 职场文书
同学会邀请书大全
2014/01/12 职场文书
旷课检讨书范文
2014/10/30 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
Spring中bean集合注入的方法详解
2022/07/07 Java/Android