美文网首页
vue.js 添加(加强版)

vue.js 添加(加强版)

作者: 王诺岚 | 来源:发表于2018-09-14 08:56 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title>Title</title>
    <link rel="stylesheet" href="boots/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="boots/bootstrap-3.3.7-dist/jquery-1.11.3.min.js" type="text/javascript " charset="utf-8" ></script>
    <script src="boots/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript " charset="utf-8" ></script>
    <style>
      input{
          width: 800px;
          height: 30px;
      }
        h3{
            padding-left: 350px;
        }
    </style>
</head>
<body>
<div id="app">
    <h4>姓名</h4>
    <input type="text" v-model="wang">
    <h4>年龄</h4>
    <input type="text" v-model="zhang">
    <h4>邮箱</h4>
    <input type="text" v-model="yang">
    <p></p>
    <button type="button" class="btn btn-primary" v-on:click="alk">添加</button>
    <button type="button" class="btn btn-success" >删除</button>
    <h3>用户列表</h3>
    <table border="" cellspacing="0" width="800px">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>邮箱</td>
            <td>操作</td>
        </tr>
        <tr v-for="(l,index) in msg">
            <td >{{l.num}}</td>
            <td>{{l.name}}</td>
            <td>{{l.price}}</td>
            <td>{{l.you}}</td>
            <td><button v-on:click="alk1(index)">删除</button></td>
        </tr>
    </table>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:[
                {
                    num:"1",
                    name:"杨梦娇",
                    price:"19",
                    you:"@123456",
                },
                {
                    num:"2",
                    name:"张春华",
                    price:"19",
                    you:"@158745",
                },
                {
                    num:"3",
                    name:"王诺岚",
                    price:"19",
                    you:"@155453",
                }
            ],
            wang:'',
            zhang:'',
            yang:''

        },
        methods:{
            alk:function(){
                this.msg.push({num:this.msg.length+1,name:this.wang,price:this.zhang,you:this.yang
                })
            },
            alk1:function(ind){
                this.msg.splice(ind,1)
            }
        }
    })
</script>
</body>
</html>

相关文章

网友评论

      本文标题:vue.js 添加(加强版)

      本文链接:https://www.haomeiwen.com/subject/rppngftx.html