vue(13)增删改查

╰+哭是因爲堅強的太久メ 2022-01-11 15:19 251阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>vue</title>
    	<style type="text/css">	
    		table tr td{ 
    			border:1px solid gray;
    		}
    		table thead tr{ 
    			background-color: lightgray;
    		}	
    		table{ 
    			border-collapse: collapse;
    		}
    		div#app{ 
    			margin:10px;
    			width:400px;
    			padding:20px;
    		}
    	</style>
    </head>
    <body>
    	<script src="jquery.min.js"></script>
    	<script src="vue.min.js"></script>
        <div id="app">
        	<table id="heroListTable">
        		<thead>
        			<tr>
        				<th>英雄名称</th>
        				<th>血量</th>
        				<th>操作</th>
        			</tr>
        		</thead>
        		<tbody>
        			<tr v-for="hero in heros">
        				<td>{ { hero.name}}</td>
        				<td>{ { hero.hp}}</td>
        				<td>
        					<a href="#" @click="edit(hero)">编辑</a>
        				</td>
        				<td>
        					<a href="#" @click="deleteHero(hero.id)">删除</a>
        				</td>
        			</tr>
        			<tr>
        				<td colspan="4">
        					英雄名称：<input type="text" v-model="hero4Add.name">
        					<br>
        					血量：<input type="number" v-model="hero4Add.hp">
        					<br>
        					<button v-on:click="add">增加</button>
        				</td>
        			</tr>
        		</tbody>
        	</table>
        	<div id="div4Update">
        		英雄名称：<input type="text" v-model="hero4Update.name">
        		<br>
        		血量：<input type="number" v-model="hero4Update.hp">
        		<br>
        		<input type="hidden" v-model="hero4Update.id">
        		<button v-on:click="update">修改</button>
        		<button type="button" v-on:click="cancel">取消</button>
        	</div>
        </div>
        <script type="text/javascript">
    
        	$("#div4Update").hide();
        	//model
        	var data = { 
        		heros:[
        			{ id:1,name:"盖伦",hp:318},
        			{ id:2,name:"提莫",hp:320},
        			{ id:3,name:"安妮",hp:410}
        		],
        		hero4Add:{ id:0,name:'',hp:'0'},
        		hero4Update:{ id:0,name:'',hp:'0'}
        	};
        	var maxId = 3;
        	for(var i=0;i<data.heros.length;i++){ 
        		if(data.heros[i].id > maxId){ 
        			maxId = this.heros[i].id;
        		}
        	}
        	//view
        	var vue = new Vue({ 
        		el:"#app",
        		data:data,
        		methods:{ 
        			add:function(event){ 
        				//获取最大id
        				maxId++;
        				//计算最大值
        				this.hero4Add.id = maxId;
        				if(this.hero4Add.name.length == 0){ 
        					this.hero4Add.name = "hero#"+this.hero4Add.id
        				}
        				//把对象加入数组
        				this.heros.push(this.hero4Add);
        				//只想新对象
        				this.hero4Add = { id:0,name:'',hp:'0'}
        			},
        			deleteHero:function(id){ 
        				console.log("id"+id);
        				for(var i = 0; i<this.heros.length;i++){ 
        					if(this.heros[i].id ==id){ 
        						this.heros.splice(i,1);
        						break;
        					}
        				}
        			},
        			edit:function(hero){ 
        				$("#heroListTable").hide();
        				$("#div4Update").show();
        				this.hero4Update = hero;
        			},
        			update:function(){ 
        				$("#heroListTable").show();
        				$("#div4Update").hide();
        			},
        			cancel:function(){ 
        				$("#heroListTable").show();
        				$("#div4Update").hide();
        			}
        		}
        	});
        </script>	
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5MzQ1MQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20190620145100407.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5MzQ1MQ_size_16_color_FFFFFF_t_70]: /images/20220110/9631ff0ef2e74898ab85fb1d44793e82.png
[20190620145100407.png]: /images/20220110/5d0ca7d3249540209421699dbf619aa7.png