• 5.9图书管理案例

        常用特性应用场景
         1. 过滤器（格式化日期）
         2. 自定义指令（获取表单焦点）
         3. 计算属性（统计图书数量）
         4. 侦听器（验证图书存在性）
         5. 生命周期（图书数据处理）

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			.grid {
    8. 				margin: auto;
    9. 				width: 500px;
    10. 				text-align: center;
    11. 			
    12. 			}
    13. 			.grid table {
    14. 				width: 100%;
    15. 				border-collapse: collapse;
    16. 			}
    17. 			.grid th,td {
    18. 				padding: 10;
    19. 				border: 1px dashed orange;
    20. 				height: 35px;
    21. 				line-height: 35px;
    22. 			}
    23. 			.grid th {
    24. 				background-color: orange;
    25. 			}
    26. 			.book div {
    27. 				padding: 10;
    28. 				line-height: 35px;
    29. 				border-bottom: 1px solid green;
    30. 				margin: auto;
    31. 				background-color: orange;
    32. 			}
    33. 			.book input {
    34. 				width: 150px;
    35. 			}
    36. 			.grid .total {
    37. 				height: 30px;
    38. 				line-height: 30px;
    39. 				background-color: #F3DCAB;
    40. 				border-top: 1px solid #C2D89A;
    41. 			}
    42. 		style>
    43. 	head>
    44. 	<body>
    45. 		<div id="app">
    46. 			<div class="grid">
    47. 				<div>
    48. 					<h1>图书管理h1>
    49. 					<div class="book">
    50. 						<div>
    51. 							<label for="id">
    52. 								编号：
    53. 							label>
    54. 							<input type="text" id="id" v-model="id" :disabled="flag" v-focus/>
    55. 							<label for="name">
    56. 								名称：
    57. 							label>
    58. 							<input type="text" id="name" v-model="name" />
    59. 							<button @click="handle" :disabled="submitFlag">提交button>
    60. 						div>
    61. 					div>
    62. 				div>
    63. 				<div class="total">
    64. 					<span>图书总数:span>
    65. 					<span>{{total}}span>
    66. 				div>
    67. 				<table>
    68. 					<thead>
    69. 						<tr>
    70. 							<th>编号th>
    71. 							<th>名称th>
    72. 							<th>时间th>
    73. 							<th>操作th>
    74. 						tr>
    75. 					thead>
    76. 					<tbody>
    77. 						<tr :key='item.id' v-for="(item, index) in books">
    78. 							<td>{{item.id}}td>
    79. 							<td>{{item.name}}td>
    80. 							<td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}td>
    81. 							<td>
    82. 								<a href="" @click.prevent="toEdit(item.id)">修改a>
    83. 								<span> | span>
    84. 								<a href="" @click.prevent="del(item.id)">删除a>
    85. 							td>
    86. 						tr>
    87. 					tbody>
    88. 				table>
    89. 			div>
    90. 		div>
    91. 	body>
    92. 	
    93. 	<script type="text/javascript" src="../js/vue.js">script>
    94. 	<script type="text/javascript" >
    95. 	
    96. 	/*
    97. 	 常用特性应用场景
    98. 	 1. 过滤器（格式化日期）
    99. 	 2. 自定义指令（获取表单焦点）
    100. 	 3. 计算属性（统计图书数量）
    101. 	 4. 侦听器（验证图书存在性）
    102. 	 5. 生命周期（图书数据处理）
    103. 	 */
    104. 	
    105. 	
    106. 	/*
    107. 	自定义指令，自动获取焦点
    108. 	 */
    109. 	Vue.directive('focus', {
    110. 		inserted: function(el){
    111. 			el.focus();
    112. 		}
    113. 	});
    114. 	
    115. 	
    116. 	/**
    117. 	过滤器（日期时间格式化）
    118. 	 */ 
    119. 	Vue.filter('format', function(value, arg){
    120. 		function dateFormat(date, format){
    121. 			if(typeof date === "string"){
    122. 				var mts = date.match(/(\/Date\((\d+)\)\/)/);
    123. 				if(mts && mts.length >= 3){
    124. 					date = parseInt(mts[2]);
    125. 				}
    126. 			}
    127. 			date = new Date(date);
    128. 			if(!date || date.toUTCString() == "Invalid Date"){
    129. 				return '';
    130. 			}
    131. 			var map = {
    132. 				"M" : date.getMonth() + 1,
    133. 				"d" : date.getDate(),
    134. 				"h" : date.getHours(),
    135. 				"m" : date.getMinutes(),
    136. 				"s" : date.getSeconds(),
    137. 				"q" : Math.floor((date.getMonth() + 3) / 3),
    138. 				"S" : date.getMilliseconds()
    139. 			};
    140. 			
    141. 			format = format.replace(/([yMdhmsqS])+/g, function(all, t){
    142. 				var v = map[t];
    143. 				if(v !== undefined){
    144. 					if(all.length > 1){
    145. 						v = '0' + v;
    146. 						v = v.substr(v.length -2);
    147. 					}
    148. 					return v;
    149. 				}else if(t === 'y'){
    150. 					return (date.getFullYear() + '').substr(4 - all.length);
    151. 				}
    152. 				return all;
    153. 			});
    154. 			return format;
    155. 		}
    156. 		return dateFormat(value, arg);
    157. 	
    158. 	})
    159. 		var vm = new Vue({
    160. 			el:'#app',
    161. 			data:{
    162. 				 msg: "hello",
    163. 				 id: '',
    164. 				 name: '',
    165. 				 flag : false,
    166. 				 submitFlag: false,
    167. 				 books: '',
    168. 			},
    169. 			methods: {
    170. 				handle: function () {
    171. 					if(this.flag){
    172. 						//编辑操作 根据当前id更新数组对应的数据
    173. 						this.books.some((item) => {
    174. 							if(item.id == this.id){
    175. 								item.name = this.name;
    176. 								//完成更新操作后，终止循环
    177. 								return true;
    178. 							}						
    179. 						})
    180. 						this.flag = false;
    181. 					}else {
    182. 						//新增
    183. 						//添加图书
    184. 						var book = {};
    185. 						book.id = this.id;
    186. 						book.name = this.name;
    187. 						book.date = '';
    188. 						this.books.push(book);
    189. 					}
    190. 					//清空表单内容
    191. 					this.id = '';
    192. 					this.name = '';
    193. 				},
    194. 				toEdit: function(id){
    195. 					//修改的时候 禁用id修改
    196. 					this.flag = true;
    197. 					console.log(id);
    198. 					//根据id查询出要编辑的数据
    199. 					var book = this.books.filter(function(item){
    200. 						return item.id == id;
    201. 					})
    202. 					console.log(book);
    203. 					// 把获取到的信息回显
    204. 					this.id = book[0].id;
    205. 					this.name = book[0].name;
    206. 					
    207. 				},
    208. 				del: function(id){
    209. 					//删除
    210. 					//根据id从数组中查找索引
    211. 					var index = this.books.findIndex(function(item){
    212. 						return item.id == id;
    213. 					});
    214. 					//根据索引删除元素
    215. 					this.books.splice(index, 1);
    216. 				}
    217. 			},
    218. 			//计算属性，计算图书总数
    219. 			computed: {
    220. 				total: function(){
    221. 					// 计算图书的总数
    222. 					return this.books.length;
    223. 				}
    224. 			},
    225. 			//侦听器，验证图书是否存在
    226. 			watch: {
    227. 				name: function(val){
    228. 					//验证图书名称是否已经存在
    229. 					var flag = this.books.some(function(item){
    230. 						return item.name == val;										
    231. 					});
    232. 					if(flag) {
    233. 						//图书名称存在，提交按钮禁用
    234. 						this.submitFlag = true;
    235. 					}else{
    236. 						this.submitFlag = false;
    237. 					}
    238. 				},
    239. 				id: function(val){
    240. 					//验证图书名称是否已经存在
    241. 					var flag = this.books.some(function(item){
    242. 						return item.id == val;										
    243. 					});
    244. 					if(flag) {
    245. 						//图书名称存在，提交按钮禁用
    246. 						this.submitFlag = true;
    247. 					}else{
    248. 						this.submitFlag = false;
    249. 					}
    250. 				}
    251. 			},
    252. 			//该生命周期钩子函数被触发的时候，模板已经可以使用
    253. 			//一般此时用于获取后台数据，然后把数据填充到模板
    254. 			mounted: function(){
    255. 				var data = [{
    256. 					 id: 1,
    257. 					 name: '七龙珠',
    258. 					 date: 2525609975000,
    259. 				 },{
    260. 					 id: 2,
    261. 					 name: '灌篮高手',
    262. 					 date: 2525609975000,
    263. 				 },{
    264. 					 id: 3,
    265. 					 name: '名侦探柯南',
    266. 					 date: 2525609975000,
    267. 				 },{
    268. 					 id: 4,
    269. 					 name: '鬼灭之刃',
    270. 					 date: 2525609975000,
    271. 				 }];
    272. 				this.books = data;
    273. 			}
    274. 		});
    275. 		
    276. 	script>
    277. html>

  • 相关阅读:
    一个完整的项目测试方案流程应该是什么样的？
    782 变为棋盘——Leetcode天天刷（2022.8.23）【数学：降维计算】
    消防应急照明和疏散指示系统在城市隧道中的应用
    操作系统MIT6.S081：[xv6参考手册第5章]-＞中断与设备驱动程序
    基于大功率白光 LED 的可见光通信
    FFmpeg部分数据结构简介
    【华为OD机试真题 JAVA】火锅
    pop3 110端口渗透测试
    MySQL主从复制介绍及实操演示
    【Spring】bean的基础配置
  • 原文地址：https://blog.csdn.net/PengK_aha/article/details/128114006