原生Vue实现CURD

最新推荐文章于 2024-05-21 12:22:33 发布

向前看傻帽儿

最新推荐文章于 2024-05-21 12:22:33 发布

阅读量932

点赞数

分类专栏： Vue 文章标签： Web前端

本文链接：https://blog.csdn.net/qq_41557320/article/details/88824425

版权

Vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

页面引入Vue和Jquery即可

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 原生Vue实现CURD -->
	<meta charset="UTF-8">
	<title>Document</title>
	<head>
        <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/vue.js"></script>
        <style type="text/css">
            td{
                border:1px solid gray;
            }

            table{
                border-collapse:collapse;
            }

            div#app{
                margin:20px auto;
                width:400px;
                padding:20px;
            }       
        </style>
    </head>
    <body>
      <div id="app">
        <table id="heroListTable" >
            <thead>
                <tr>
                    <th>英雄名称</th>
                    <th>血量</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(hero,index) in heros ">
                    <td>{{hero.name}}</td>
                    <td>{{hero.hp}}</td>
                    <td><a href="#" v-on:click="deleteHero(hero.id)">删除</a> <a href="#" v-on:click="edit(hero)">编辑</a></td>
                </tr>
                <tr>
                   <td colspan="3">
                      英雄名称:
                      <input type="text" v-model="hero4Add.name"><br>
                      血量:
                      <input type="number" v-model="hero4Add.hp"><br>
                      <button type="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" />                        
        <input type="hidden"    v-model="hero4Update.id" />                        
        <br>
        <button type="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: 419},
        { id: 4, name: '死歌', hp: 325},
        { id: 5, name: '米波', hp: 422},
        ],
        hero4Add: { id: 0, name: '', hp: '0'},
        hero4Update: { id: 0, name: '', hp: '0'}
    };

    var maxId = 5;
    for(var i=0;i<data.heros.length;i++){
    	if(data.heros[i].id>maxId)
    		maxId = this.this.heros[i].id
    }

    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
        	add: function (event) {
        		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) {
        		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(){
			    //因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
			    $("#heroListTable").show();
			    $("#div4Update").hide();           
			},
			cancel:function(){
			    //其实就是恢复显示
			    $("#heroListTable").show();
			    $("#div4Update").hide();
			}
        }
    });
</script>
</body>
</html>

向前看傻帽儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生Vue实现CURD

页面引入Vue和Jquery即可<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8"> <title>Document</title> <head> <s...
复制链接

扫一扫

专栏目录