我们首先来看下代码:
<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); } } })
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 很有多样性:《战锤》首次引入非二元性别角色
- 《少女前线2:追放》项目组将裁员 官方:进一步优化组织结构
- 陈慧琳.2002-闪亮每一天新歌+精选2CD【正东】【WAV+CUE】
- 袁培华.1992-有缘【歌林】【WAV+CUE】
- 王瑞霞.1996-是我太软心【名冠】【WAV+CUE】
- 《谭维维 30首经典流行歌曲精选辑 2CD》[WAV/分轨][1.1GB]
- 《赵传 出道三十年全新大碟 你过得还好吗》[WAV/分轨][460MB]
- 《发烧四大天王 磁性男声HiFi发烧碟 2CD》[WAV/分轨][1GB]
- 黑神话悟空上品鼠司空精魄获取方法一览|上品鼠司空精魄收集攻略
- 《真三国无双:起源》新情报将于9月26日公开,实机演示亮相!
- 黑神话悟空上品鼠禁卫精魄获取方法一览|上品鼠禁卫精魄收集攻略
- 优美的旋律至真的情怀《品茶轻音乐·极品典藏Vol.1CD1》[WAV+CUE]
- 曾嵘《峥嵘岁月DSD(试音碟)》WAV+CUE
- 小提琴天碟AlfredoCampoli坎波利-贝多芬D大调小提琴协奏曲与普罗米修斯作品选FLAC
- 博主称本周游戏业内动荡无比:高价PS5 Pro、Xbox裁员等