vue.js的简单的CRUD

一、项目用到了vue，上周五写了一个小demo给同事，今天发出来，记录一下，也希望能对其他人了解vue工作有些帮助吧。
二、直接上代码吧

 <!DOCTYPE html>
 <html>
  <head> 
   <meta charset="utf-8" /> 
   <title></title> 
   <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 
  </head> 
  <body> 
   <div id="app"> 
    <table border="1"> 
     <tbody> 
      <tr v-for="text,index in info"> 
       <td>姓名:</td> 
       <td>{{text.name}}</td> 
       <td>联系方式:</td> 
       <td>{{text.phone}}</td> 
       <td> <input name="checkbox" type="checkbox" @click="getIndex(index)" /> </td> 
      </tr> 
     </tbody> 
    </table> 
    <input type="button" value="update" @click="update" /> 
    <input type="button" value="add" @click="add" /> 
    <input type="button" value="delete" @click="mdelete" /> 
   </div> 
   <script>
 var vm = new Vue({
     el: '#app',
     data: {
               index: [],
               info: [
                      { name: 'a',phone:'12313'},
                      { name: 'b',phone:'12313'},
                      { name: 'c',phone:'12313'}
                    ],
                   n: 1
    },
 methods:{
 update: function() {
     vm.info = [{
         name: '赵',
         phone: '1111'
     },
     {
         name: '钱',
         phone: '2222'
     },
     {
         name: '孙',
         phone: '3333'
     }];
 },
 add: function() {
     var index = vm.info.length;
     vm.info.push({
         name: '测试' + vm.n,
         phone: '电话' + vm.n
     });
     vm.n++;
 },
 getIndex: function(index) {
     vm.index.push(index);
 },
 mdelete: function() {
     for (var j = 0; j < vm.index.length; j++) {
         vm.info.splice(vm.index[j + 1], 1);
     }
     for (var i = 0; i < document.all.length; i++) {
         if (document.all(i).type == "checkbox") {
             document.all(i).checked = false;
         }
     }
 }
 }
 })
 
 </script>  
  </body>
 </html>

三、直接在浏览器里面运行即可...

也欢迎登录我的个人网站，里面有更多的文章及技术咨询在等你：http://www.guangmuhua.com

更多精彩请关注guangmuhua.com