好资源导航 » 文章资讯 » vue实现商品列表的添加删除实例讲解

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

2023-07-25 10:19:06 72

我们首先来看下代码：



ID：

Name：

提交 ID 品牌名称添加时间操作 {{item.id}} {{item.pp_name}} {{item.add_time|getTime()}} 删除

//{ if(item.id===id){ this.list.splice(i,1); //在数组some中如果返回值为true，则会立即终止后续的循环 returntrue; } }) } }, //时间的过滤 filters:{ getTime:function(value){ letdate=newDate(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;} lett=Y+'-'+m+'-'+d+'|'+h+':'+min+':'+s; returnt; } } }) //]]>

内容补充：

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

1、首先在html的标签中导入vue.js

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

//vue起作用的区域root

//input与mesg数据绑定

提交

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

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

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

newVue({
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商品列表添加删除内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐