铁雪资源网 Design By www.gsvan.com
我们首先来看下代码:
<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="/UploadFiles/2021-04-02/vue.js">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,商品列表,添加删除
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无vue实现商品列表的添加删除实例讲解的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?