该案例主要实现功能为图书的添加、删除以及修改。 主要涉及的知识有事件绑定，聚焦、时间格式化、数量统计、侦听器、生命周期等
样式：
<style type="text/css"> .grid { margin: auto; width: 500px; text-align: center; } .grid table { width: 100%; border-collapse: collapse; } .submit{ background-color: orange; height: 35px; width: 500px; line-height: 35px; border-bottom: 1px dashed white; } .grid th,td { padding: 10; border: 1px dashed orange; height: 35px; line-height: 35px; } .grid th { background-color: orange; } .total{ width: 500px; height: 35px; line-height: 35px; text-align: center; background-color: orange; border-bottom: 1px dashed white; } </style>图书管理基本框架：
<div id="app"> <div class="grid"> <table> <!-- 编号 名称模块 --> <div class="submit"> <span>编号:</span> <input type="text" v-model="id" :disabled="flag" v-focus> <span>名称:</span> <input type="text" v-model="name"> <button type='submit' @click="submit" :disabled='submitFlag'>提交</button> </div> <!-- 图书总数 --> <div class='total'> <span>图书总数：</span> <span >{{total}}</span> </div> <!-- 编号 名称 时间 操作 --> <thead> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> </thead> <!-- 图书具体信息 --> <tbody> <tr :key='item.id' v-for='item in books'> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td> <td> <a href="" @click.prevent='change(item.id)' >修改</a> <span>|</span> <a href="" @click.prevent='del(item.id)'>删除</a> </td> </tr> </tbody> </table> </div> </div>具体实现：
<script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 图书管理-图书列表展示功能 注意事项：<a href="" @click.prevent>修改</a> 事件绑定时，可以只添加修饰符，而不绑定事件函数 */ // 聚焦 Vue.directive('focus', { inserted: function (el) { el.focus(); } }); //时间格式化 Vue.filter('format',function(value,arg){ function dateFormat(date, format) { if (typeof date === "string") { var mts = date.match(/(\/Date\((\d+)\)\/)/); if (mts && mts.length >= 3) { date = parseInt(mts[2]); } } date = new Date(date); if (!date || date.toUTCString() == "Invalid Date") { return ""; } var map = { "M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小时 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 }; format = format.replace(/([yMdhmsqS])+/g, function(all, t) { var v = map[t]; if (v !== undefined) { if (all.length > 1) { v = '0' + v; v = v.substr(v.length - 2); } return v; } else if (t === 'y') { return (date.getFullYear() + '').substr(4 - all.length); } return all; }); return format; } return dateFormat(value,arg); }); var vm = new Vue({ el: '#app', data: { submitFlag:false, flag:false, id:'', name:'', books: [] }, methods:{ submit:function(){ if(this.flag){ this.books.some((item) => { if(item.id==this.id){ item.name=this.name; return true; } }); flag=false; }else{ //添加新书 var book={}; book.id=this.id; book.name=this.name; book.date=""; this.books.push(book); //信息置空 this.id=''; this.name=''; } this.name=''; this.id=''; }, //仅仅筛选数据填充到提交框中 change:function(id){ //获取该书 this.flag=true; console.log(id); var book=this.books.filter(function(item){ return item.id==id; }); console.log(book); this.id=book[0].id; this.name=book[0].name; }, //删除操作 del:function(id){ //第一种方法 /* //找到索引 var index=this.books.findIndex(function(item){ return item.id==id; }); console.log(index); //删除数组元素 this.books.splice(index,1); */ //第二种方法——filter方法 this.books=this.books.filter(function(item){ return item.id!=id; }) } }, // 计算属性，统计图书数量 computed:{ //计算图书总数 total:function(){ return this.books.length; } }, // 侦听器，检验图书存在性 watch:{ name:function(val){ var flag=this.books.some(function(item){ return item.name==val; }) if(flag){ this.submitFlag=true; } else{ this.submitFlag=false; } } }, // 和后台连接，生命周期 mounted:function(){ var date=[{ id: 1, name: '三国演义', date: 2525609975000 },{ id: 2, name: '水浒传', date: 2525609975000 },{ id: 3, name: '红楼梦', date: 2525609975000 },{ id: 4, name: '西游记', date: 2525609975000 }] this.books=date; } }); </script>效果图：
