master

分支 (1)

管理

管理

master

vue-website
/
demo.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
    <link rel="stylesheet" href="./static/css/demo.css" type="text/css">
    <script src="./static/vue2.js"></script>
</head>
<body>
<div id="app">

    <fieldset>
        <legend>
            Create New Person
        </legend>
        <div class="form-group">
            <label>Name:</label>
            <input type="text" v-model="newPerson.name">
        </div>
        <div class="form-group">
            <label>Age:</label>
            <input type="text" v-model="newPerson.age">
        </div>
        <div class="form-group">
            <label>Sex:</label>
            <select v-model="newPerson.sex">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
        </div>
        <div class="form-group">
            <label></label>
            <button @click="createPerson">Create</button>
        </div>
    </fieldset>
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="person in people">
                <td>{{ person.name }}</td>
                <td>{{ person.age }}</td>
                <td>{{ person.sex }}</td>
                <td class="text-center"><button @click="delPerson(person)">Delete</button></td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            newPerson:{
                name:'',
                age:0,
                sex:'Male'
            },
            people:[{
                name:'spring',
                age:32,
                sex:'Female'
            },{
                name:'kagome',
                age:16,
                sex:'Female'
            },{
                name:'inuyasha',
                age:32,
                sex:'Male'
            }],
        },
        methods:{
            createPerson:function(){
                //console.log(this.newPerson);
                this.people.push(this.newPerson);
                this.newPerson = {name:'',age:0,sex:'Male'};
            },
            delPerson:function(index){

                this.people.splice(index,1);
            }
        }
    })
</script>
</body>
</html>