6.5 Vue输出的问题

 <template>
   <div>
     <div>
       学号<input type="text" v-model="id"><br>
       姓名<input type="text" v-model="name"><br>
       性别<input type="text" v-model="sex"><br>
       年龄<input type="text" v-model="age"><br>
       <input type="button" value="确定" @click="determine">
       <input type="button" value="取消">
     </div>
       
 ​
       <el-table
         :data="lists"
         style="width: 100%">
         <!-- 使用表格组件时如下prop可以通过对象调用获取属性名 -->
       <el-table-column
         prop="id"
         label="学号"
         width="180">
       </el-table-column>
       <el-table-column
         prop="name"
         label="姓名"
         width="180">
       </el-table-column>
       <el-table-column
         prop="sex"
         label="性别">
       </el-table-column>
       <el-table-column
         prop="age"
         label="年龄">
       </el-table-column>
        <el-table-column
       fixed="right"
       label="操作"
       width="120">
       <template slot-scope="scope">
         <el-button
           @click.native.prevent="deleteRow(scope.$index, lists)"
           type="text"
           size="small">
           移除
         </el-button>
       </template>
       </el-table-column>
     </el-table>
   </div>
 </template>
 ​
 <script>
 export default {
   name:'demo01',
   data(){
     return{
       id:'',
       name:'',
       sex:'',
       age:'',
       list:[],
       lists:[]
     }
   },
   methods:{
     determine(){
       this.list['id'] = this.id;
       this.id = '';
       this.list['name'] = this.name;
       this.name = '';
       this.list['sex'] = this.sex;
       this.sex = '';
       this.list['age'] = this.age;
       this.age = '';
       console.log(this.list);
       this.lists.push(this.list);  
       debugger
       this.list = [];     
       console.log(this.lists);
     },
     deleteRow(index,rows){
       rows.splice(index, 1);
     }
   }
 }
 </script>
 ​
 <style>
 </style>

今天做了一个添加删除的东西，感觉还不错，入门挺好的，用到了一些element-ui的组件 

主要是事件的双向绑定的问题，还有对数组和字典的添加

当然还有事件的单向绑定，但是绑定只是单向的，双向绑定两者可以同时操作同一个数据，一旦更改了一个，则会改变结果