vue 增删改 - 爱码网

vue 增删改
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
       td,th{
          width: 150px;
           height: 50px;
           border: 1px solid ;
       }
    </style>
</head>
<body>
<div id="app">
    <table>
        name:<input type="text"  v-model="names" >{{name}}<br>
        age:<input type="number" v-model.number="ages">
        <br>
        sex:



        <select name="" id="" v-model="selected">
            <option v-for="item in items" :value="item.value"  >{{item.text}}</option>
        </select>
        <!--<span>{{selected}}</span>-->
        <br>


        <button @click="nsm()">添加</button>
        <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Delte</th>
        </tr>
        <tr v-for="(item,index) in arr">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td><button @click="del(index)">删除</button></td>
        </tr>
        </thead>
    </table>




</div>
<script>
    new Vue({
        el:"#app",
        data:{
            flags:true,
            arr:[{name:'Jack',age:'30',sex:'Male'},{name:'Bill',age:'26',sex:'Male'},{name:'Tracy',age:'22',sex:'Female'},{name:'Chris',age:'36',sex:'Male'}],
            items:[{text:"男",value:"Male"},{text:"女",value:"Female"}],
            selected:"Male",
            names:'',
            ages:'',
        },
        methods:{
           del(index){
               this.arr.splice(index,1);
           },
            nsm(){
                var data={
                    name:this.names,
                    age:this.ages,
                    sex:this.selected,
                }
                for (var i=0;i<this.arr.length;i++){
                    for (var j=0; j<this.arr.length;j++){
                        if (data.name == this.arr[i].name) {
                            alert(1)
                            break;
                        }
                    }
                    if (data.name==''&&data.age==''){
                            // alert("内容不能为空")
                            break;
                        }else{
                            this.arr.push(data)
                            break;
                        }

                }
            }
        }
    })
</script>
</body>
</html>