用户添加和删除

本次作业应用了几个简单的vue.js指令，如v-model、v-on、v-for等最为常见的指令
v-model：能轻松实现表单输入和应用状态之间的双向绑定可用于表单元素
v-for: v-for 指令可以绑定数组的数据来渲染一个项目列表也就是vue中的循环
v-on：可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法输入格式： v-on：事件名='函数名' 绑定一个事件的可简写为 @click=""
接下来是实例：

<style>
    h1{
        text-align: center;
    }
    #add{
        text-align: center;
    }
    /*#list{
        text-align: center;
        width: 800px;
        border-top: 1px solid #d5d5d5;
    }*/
    h4{
        margin-right: 350px;
        height: 0;
    }
    input{
        width: 860px;
        line-height: 30px;
        border-radius: 5px;
        border: 1px #d5d5d5 solid;
    }
    #add button{
        width: 70px;
        height: 40px;
        border-radius: 5px;
        border: 1px #fff solid;
        cursor: pointer;
        color: #fafffb;
    }
    .btn{
        margin-top: 10px;
    }
    table{
        margin-left: 352px;
    }
</style>
<body>
<div id="add">
    <h1>添加用户</h1>
    <h4>姓名</h4>
    <input type="text" placeholder="请输入姓名" v-model="msg.name">
    <h4>年龄</h4>
    <input type="text" placeholder="请输入年龄" v-model="msg.age">
    <h4>邮箱</h4>
    <input type="text" placeholder="请输入邮箱" v-model="msg.email">
    <div class="btn">
        <button style="background-color: #1482d5" v-on:click="str">添加</button>
        <button style="background-color: #38d591" v-on:click="dsd">重置</button>
    </div>
    <div class="list">
        <h5>用户列表</h5>
        <table border="1" cellspacing="0" width="860px">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
            <tr v-for="(value,index) in user">
                <td>{{index+1}}</td>
                <td>{{value.name}}</td>
                <td>{{value.age}}</td>
                <td>{{value.email}}</td>
                <td><button v-on:click="del(index)">删除</button></td>
            </tr>
        </table>
    </div>
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#add",
        data:{
            user:[
                {name:"tom",age:18,email:"tom@126.com"},
                {name:"jack",age:19,email:"jack@126.com"},
                {name:"amy",age:20,email:"amy@126.com"}
            ],
            msg:{}
        },
        methods:{
            str:function(){
                var newstr = {};
                for(var i in this.msg){
            newstr[i]=this.msg[i]
            }
                this.user.push(newstr)
            },
            del:function(ind){
                this.user.splice(ind,1)
            },
            dsd:function(){
                location.reload();
            }

        }
    });
</script>

效果图如下：

QQ截图20180915111016.png