vue(13)增删改查

最新推荐文章于 2024-05-16 22:00:22 发布

taojYang

最新推荐文章于 2024-05-16 22:00:22 发布

阅读量109

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43293451/article/details/93036299

版权

vue 专栏收录该内容

14 篇文章 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>

在这里插入图片描述

taojYang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue(13)增删改查

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <style type="text/css"> table tr td{ border:1px solid gray; } t...
复制链接

扫一扫

专栏目录