vue实现商品列表的添加删除实例讲解
我们首先来看下代码：
<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商品列表添加删除内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
vue实现商品列表的添加删除实例讲解
我们首先来看下代码: <div id="app"> <div class="container"><form class="form-inline"> <div class="form-group"><label for="exampleInputName2">ID:</label> <input id="example
-
Vue element商品列表的增删改功能实现
目录 介绍 基本信息 上传主图 商品信息vue富文本编辑器的配置 最后提交数据 介绍 整体和用户列表 类似 功能步骤有: 面包屑导航 外部是大的卡片组件 搜索商品 添加商品 表格渲染数据 作用域插槽用于 操作按钮 分页器组件的使用 不一样的点:之前编辑信息 新增信息是 弹出对话框编辑 但商品信息内容较多 我们跳转到一个组件.并且进行商品编辑的时候要进行路由传参 来渲染初始数据 点击添加商品按钮时跳转到新增商品组件对应路径: addGoods(){ this.$router.push('/good
-
vue仿ios列表左划删除
本文实例为大家分享了vue仿ios列表左划删除的具体代码,供大家参考,具体内容如下 效果: 代码: <template> <div class="delete"> <div class="slider"> <div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style=&quo
-
Vue+ElementUI怎么处理超大表单实例讲解
最近公司由于业务的调整,之前的超长表单的逻辑改动较多,所以我就打算重构了(之前是一个已离职的后台写的,也没有注释,一个组件写了4000+行,实在有心无力).为了各位方便阅读,我这里把项目里拆分了14个组件进行了精简. 整体思路 大表单根据业务模块进行拆分 保存时使用el-form提供的validate方法进行校验(循环对每一个拆分的组件进行校验) mixin 对每个组件的公共提取(也利于后期项目的维护) 开始 这里以拆分2个组件为例:form1, form2(方便读者观看,命名勿喷) 这里两个组
-
vue.js与后台数据交互的实例讲解
第一步:引入js库: <script src="../js/common/vue.min.js"></script> <script src="../js/common/vue-resource.js"></script> 前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti
-
pytest allure添加环境信息实例讲解
目录 前言 properties文件 xml文件 前言 本篇来学习下在allure中如何添加环境信息 properties文件 在allure的report根目录下添加一个 environment.properties 文件,allure报告就会显示在报告中 Author=DHNativePlace=LiaoningCity=BeijingAge=28Professional=Test EngineerBlog=https://www.jb51.net/ 编写case # -*- coding:
-
vue实现动态列表尾部添加数据执行动画
目录 动态列表尾部添加数据执行动画 先上动画 动态数据使用wowjs显示动画 1.通过npm安装 2.在main.js中引入animate.css 动态列表尾部添加数据执行动画 先上动画 动态控制节点数量(目前只显示6个节点) 尾部添加几个item,头部则删除几个item 触发 transition-group 动画 splice 的使用方法 代码: <style lang="scss"> .content { display: flex; width: 600px
-
Asp.Mvc 2.0用户的编辑与删除实例讲解(5)
这一节来给大家演示下怎么对用户信息进行修改和删除用户,主要包括以下内容 1.显示所有用户 2.编辑用户 3.删除用户 1.显示所有用户 我们把所有用户信息查询出来,以表格形式在页面上显示,效果图如下: 首先把所有用户信息显示在index页面上.找到index页面对应的controller,然后查找出所有用户信息,把查找出的用户集合放在viewdata里面 Controller代码: public ActionResult Index() { //查询出所有用户 DataSet ds = n
-
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
本文讲解如何通过ajax查询mysql数据,并将返回的数据显示在待选列表中,再通过选择最终将选项加入到已选区,可以用在许多后台管理系统中.本文列表框的操作依赖jquery插件. HTML <form id="sel_form" action="post.php" method="post"> <p><input type="text" name="keys" id="
-
vue中axios的二次封装实例讲解
我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建request.js文件 import axios from 'axios' import router from '@/router/routers' import { Notification, MessageBox } from 'element-ui' import store from '