- <template>
- <div id="app">
- <div class="row">
- <div class="col-sm-12 col-md-8">
- <table class="table">
- <thead>
- <tr>
- <th scope="col">Last</th>
- <th scope="col">Handle</th>
- <th scope="col"> 添加 </th>
- </tr>
- </thead>
- <tbody v-for="item in arrays" :key="item.id">
- <tr>
- <td>{{item.name}}</td>
- <td>{{item.age}}</td>
- <td><button @click="tianjia(item)" class="btn btn-success btn-sm">+</button></td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="col-sm-12 col-md-4">
- <table class="table">
- <thead>
- <tr>
- <th scope="col">Last</th>
- <th scope="col">Handle</th>
- <th scope="col"> 删除 </th>
- </tr>
- </thead>
- <tbody v-for="option in basket" :key="option.id">
- <tr>
- <td>{{option.name}}</td>
- <td>{{option.age}}</td>
- <td><button @click="shanchu(option)" class="btn btn-success btn-sm">x</button></td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: "app",
- data() {
- return {
- basket:[],
- arrays: [{ name: "李经理", age: 19 }, { name: "吉文丽", age: 15 }]
- };
- },
- methods:{
- tianjia(item){
- this.basket.push({
- name:item.name,
- age:item.age
- })
- },
- shanchu(option){
- this.basket.splice(this.basket.indexOf(option), 1);
- }
- }
- };
- </script>
- <style>
- </style>
来源: http://www.qdfuns.com/article/42874/80513e18fe31480511e634bd332fe478.html