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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
JS实现拼图游戏
Jan 29 Javascript
微信小程序实现列表左右滑动
Nov 19 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
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
Javascript Objects详解
2014/09/04 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
python中urllib模块用法实例详解
2014/11/19 Python
python正则分析nginx的访问日志
2017/01/17 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
暑期学习心得体会
2014/09/02 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
教你部署vue项目到docker
2022/04/05 Vue.js
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS