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

我们首先来看下代码：

ID
品牌名称
添加时间
操作


{{item.id}}
{{item.pp_name}}
{{item.add_time | getTime()}}
删除

内容补充：

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实例

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