步骤
1.提供静态数据
2.把提供的数据渲染到页面上
3.添加图书
4.修改图书
5.删除图书
代码
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><title>vue图书管理系统</title><style type&＃61;"text/css">.grid {margin: auto;width: 530px;text-align: center;}.grid table {border-top: 1px solid #C2D89A;width: 100%;border-collapse: collapse;}.grid th,td {padding: 10;border: 1px dashed #F3DCAB;height: 35px;line-height: 35px;}.grid th {background-color: #F3DCAB;}.grid .book {padding-bottom: 10px;padding-top: 5px;background-color: #F3DCAB;}.grid .total {height: 30px;line-height: 30px;background-color: #F3DCAB;border-top: 1px solid #C2D89A;}</style><script src&＃61;"js/jquery.js" type&＃61;"text/Javascript" charset&＃61;"utf-8"></script><script src&＃61;"js/vue.js" type&＃61;"text/Javascript" charset&＃61;"utf-8"></script><script type&＃61;"text/Javascript">$(function() {var vm &＃61; new Vue({el: "#app",data: {id: &＃39;&＃39;,name: &＃39;&＃39;,btnFlag: false, iptFlag: false, subName:"添加", books: [{id: 1,name: &＃39;数据结构&＃39;,date: &＃39;2020-10-01 00:00:00&＃39;}, {id: 2,name: &＃39;算法分析与设计&＃39;,date: &＃39;2020-11-01 00:00:00&＃39;}, {id: 3,name: &＃39;大话设计模式&＃39;,date: &＃39;2020-12-01 00:00:00&＃39;}, {id: 4,name: &＃39;Java编程思想&＃39;,date: &＃39;2020-07-01 00:00:00&＃39;}]},methods: {save() {if (this.iptFlag) {this.books.some((item) &＃61;> {if (item.id &＃61;&＃61; this.id) {item.name &＃61; this.name;return true;}})this.iptFlag &＃61; false;} else {var book &＃61; {};book.id &＃61; this.id;book.name &＃61; this.name;book.date &＃61; &＃39;2020-12-04 00:00:00&＃39;;if (this.id !&＃61; &＃39;&＃39; && this.name !&＃61; &＃39;&＃39;) {this.books.push(book);}}this.id &＃61; &＃39;&＃39;;this.name &＃61; &＃39;&＃39;;this.subName &＃61; "添加";},edit(id) {var book &＃61; this.books.filter(function(item) {return item.id &＃61;&＃61; id;})this.id &＃61; book[0].id;this.name &＃61; book[0].name;this.iptFlag &＃61; true;this.subName &＃61; "修改";},deleteBook(id) {this.books &＃61; this.books.filter(function(item) {return item.id !&＃61; id;})},},watch: {id: function(val) {if(this.iptFlag &＃61;&＃61; false){this.btnFlag &＃61; this.books.some(function(item) {return item.id &＃61;&＃61; val;})}}},computed: {total() {return this.books.length;}}})})</script></head><body><!-- 防止页面闪烁 --><div id&＃61;"app" v-cloak><div class&＃61;"grid"><div><h1>图书管理</h1><div class&＃61;"book"><div><label for&＃61;"id">编号&＃xff1a;</label><!-- 绑定id 绑定disabled属性--><input type&＃61;"text" id&＃61;"id" v-model.lazy&＃61;"id" :disabled&＃61;"iptFlag"><label for&＃61;"name">名称&＃xff1a;</label><!-- 绑定name --><input type&＃61;"text" id&＃61;"name" v-model&＃61;"name"><!-- 给按钮添加点击事件 --><button &＃64;click&＃61;"save" :disabled&＃61;"btnFlag">{{subName}}</button></div></div></div><div class&＃61;"total"><span>图书总数&＃xff1a;</span><span>{{total}}</span></div><table><thead><tr><th>编号</th><th>名称</th><th>时间</th><th>操作</th></tr></thead><tbody><tr v-for&＃61;"item in books" :key&＃61;&＃39;item.id&＃39;><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td><!-- 阻止a标签的默认跳转 --><a href&＃61;"" &＃64;click.prevent&＃61;&＃39;edit(item.id)&＃39;>修改</a><span>|</span><a href&＃61;"" &＃64;click.prevent&＃61;&＃39;deleteBook(item.id)&＃39;>删除</a></td></tr></tbody></table></div></div></body>
</html>
京公网安备 11010802041100号