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 相关文章推荐
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
js中typeof的用法汇总
Dec 12 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 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
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
python编写的最短路径算法
2015/03/25 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python类属性与实例属性用法分析
2015/05/09 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
人机交互程序 python实现人机对话
2017/11/14 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
过滤器的用法
2013/10/08 面试题
会计电算化专业毕业生自荐信
2013/12/20 职场文书
全国道德模范事迹
2014/02/01 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
大学新闻系自荐书
2014/05/31 职场文书
岳麓书院导游词
2015/02/03 职场文书
基于python实现银行管理系统
2021/04/20 Python