vue.js之常操作（实例）
Posted 奕佚
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js之常操作（实例）相关的知识，希望对你有一定的参考价值。
听说大家都开始用react、vue这些MVVM框架了，为了不落后，还是学学吧！（之前只对angular了解一点，时间一长，也忘得差不多了，所以学习vue相当于从小白开始）
从vue.js官网看一下，先学习几个基本指令：v-if、v-show、v-bind、v-model、v-for、v-on，然后一起做一个练习。
要实现上图功能，构思一下应该会用到什么指令，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue综合练习</title> <link rel="stylesheet" href="css/bootstrap.css" /> <script src="https://unpkg.com/vue"></script> <style> table th,table td{ text-align: center; } </style> </head> <body > <div id="app"> <div class="form form-horizontal col-lg-10 col-md-10 col-lg-offset-1 col-md-offset-1"> <div class="form-group"> <label for="name" class="col-lg-1 col-md-1 col-sm-2 control-label">姓名：</label> <div class=" col-lg-11 col-md-11 col-sm-10"> <input type="text" class="form-control" id="name" placeholder="请输入姓名" v-model="newPerson.name"/> </div> </div> <div class="form-group"> <label for="age" class="col-lg-1 col-md-1 col-sm-2 control-label">年龄：</label> <div class=" col-lg-11 col-md-11 col-sm-10"> <input type="text" class="form-control" id="age" placeholder="请输入年龄" v-model="newPerson.age"/> </div> </div> <div class="form-group"> <label for="sex" class="col-lg-1 col-md-1 col-sm-2 control-label">性别：</label> <div class=" col-lg-11 col-md-11 col-sm-10"> <label class="radio-inline"><input type="radio" name="radiolist" v-model="newPerson.sex" value="男"/>男</label> <label class="radio-inline"><input type="radio" name="radiolist" v-model="newPerson.sex" value="女"/>女</label> </div> </div> <div class="form-group"> <button class="col-lg-1 col-md-1 col-sm-2 col-lg-offset-6 col-md-offset-6 btn btn-success" v-on:click="creat()">添加</button> </div> </div> <div class="col-lg-10 col-md-10 col-lg-offset-1 col-md-offset-1"> <table class="table table-bordered table-striped table-hover" > <thead> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>操作</th> </thead> <tbody> <tr v-for="(person,index) in people"> <td>{{person.name}}</td> <td>{{person.sex}}</td> <td>{{person.age}}</td> <td><button class="btn btn-success" v-on:click="deletePerson(index)">删除</button></td> </tr> </tbody> </table> </div> </div> <script> var app=new Vue({ el:"#app", data:{ newPerson:{ name:"", sex:"男",//第一次的默认值 age:"0", }, people:[{ name:"jack", sex:"男", age:28, }, { name:"Bill", sex:"男", age:25, }, { name:"Tracy", sex:"女", age:20, }, ] }, methods:{ creat:function(){ this.people.push(this.newPerson); this.newPerson={name:"",sex:"男",age:"0"}//sex每次添加时不选择的默认值 }, deletePerson:function(index){ this.people.splice(index,1); } }, }) </script> </body> </html>
以上是关于vue.js之常操作（实例）的主要内容，如果未能解决你的问题，请参考以下文章