Vue.js_demo01

来源：互联网发布：济南浪潮java工资待遇编辑：程序博客网时间：2024/06/04 19:06
<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head>    <meta charset="UTF-8">    <title>Vue.js小demo</title>    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">    <style>        label{float:left;line-height: 34px;}        .panel-body{            margin:30px auto;        }    </style></head><body><!-- 这是我们的view --><div class="col-md-6">    <div class="panel panel-default" id="app" >     <!--给指令的父元素指定一个id,相当于angularJs里面的controller-->        <div class="panel-body">            <div class="form-group">                <label class="col-md-2 control-label">Name：</label>                <input type="text" class="col-md-9 form-control" v-model="newPerson.name"/>  <!--v-model把视图绑定的模型数据，相当于angularJs里面的ng-model-->            </div>            <div class="form-group">                <label class="col-md-2 control-label">Age：</label>                <input type="text" class="col-md-9 form-control" v-model="newPerson.age">            </div>            <div class="form-group">                <label class="col-md-2 control-label">Sex：</label>                <select class="col-md-9 form-control" v-model="newPerson.sex">                    <option value="Male">Male</option>                    <option value="Female">Female</option>                </select>            </div>            <div class="form-group">                <label class="col-md-8"></label>                <button class="col-md-3" @click="createPerson">Create</button> <!--绑定单击事件方法一： @click-->            </div>        </div>        <div class="panel-body">            <table class="table text-center">                <thead>                <tr >                    <th class="text-center">Name</th>                    <th class="text-center">Age</th>                    <th class="text-center">Sex</th>                    <th class="text-center">Delete</th>                </tr>                </thead>                <tbody>                <tr v-for="person in people"> <!--        v-for  in 相当于angularJs里面的ng-repeat      -->                    <td>{{ person.name }}</td>                    <td>{{ person.age }}</td>  <!--变量放在双花括号里面,和angularJs一样-->                    <td>{{ person.sex }}</td>                    <td><button v-on:click="delPerson($index)">Delete</button></td> <!--绑定单击事件方法二： v-on:click，相当于angularJs里面的ng-click-->                </tr>                </tbody>            </table>        </div>    </div></div></body><script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script><script>    //创建一个Vue实例或"ViewModel",它连接view与model    var vm = new Vue({        el: '#app',        data: {            newPerson: {                name: '',                age: '',                sex: 'Male'            },            people: [{                name: 'Jack',                age: 30,                sex: 'Male'            }, {                name: 'Bill',                age: 26,                sex: 'Male'            }, {                name: 'Tracy',                age: 22,                sex: 'Female'            }, {                name: 'Chris',                age: 36,                sex: 'Male'            }]        },        methods:{            createPerson: function(){                this.people.push(this.newPerson);                // 添加完newPerson对象后，重置newPerson对象                this.newPerson = {name: '', age: '', sex: 'Male'}            },            delPerson: function(index){                // 删一个数组元素                this.people.splice(index,1);            }        }    });</script></html>
阅读全文
0 0