Vue指令實戰：結合bootstrap做一個使用者資訊輸入表格

標籤：vue @click v-show

結合前面的vue指令做了個小例子，使用者在表單裡面輸入使用者名稱和年齡，點擊“添加”以後會儲存到使用者資訊表裡面

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="renderer" content="webkit">    <link rel="stylesheet" href="resources/css/bootstrap.min.css"/>    <title></title></head><body><div class="container" id="box">    <form role="form">        <div class="form-group">            <label for="uName">使用者名稱：</label>            <!--.form-control 類的 <input>、<textarea> 和 <select> 元素都將被預設設定寬度屬性為 width: 100%;-->            <input type="text" id="uName" class="form-control" v-model="userName">        </div>        <div class="form-group">            <label for="age">年  齡：</label>            <input type="text" id="age" class="form-control" v-model="userAge">        </div>        <div class="form-group">            <input type="button" value="添加" class="btn btn-primary" @click="add">            <input type="reset" value="重設" class="btn btn-success">        </div>    </form>    <hr>    <table class="table table-bordered table-hover">        <caption class="h2 text-center">使用者資訊表</caption>        <thead>        <tr class="text-info">            <th class="text-center">序號</th>            <th class="text-center">名字</th>            <th class="text-center">年齡</th>            <th class="text-center">操作</th>        </tr>        </thead>        <tbody>        <tr class="text-center" v-for="item in myData">            <td>{{$index+1}}</td>            <td>{{item.name}}</td>            <td>{{item.age}}</td>            <td><button class="btn btn-info btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=$index">刪除</button></td>        </tr>        <tr class="text-right" v-show="myData.length!=0">            <td colspan="4">                <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=-2">全部刪除</button>            </td>        </tr>        <tr class="text-center text-muted" v-show="myData.length==0">            <td colspan="4"><p>暫無資料……</p></td>        </tr>        </tbody>    </table>    <!--模態框 彈出框-->    <div class="modal fade" role="dialog" id="layer">        <div class="modal-dialog">            <div class="modal-content">                <div class="modal-header">                    <button type="button" class="close" data-dismiss="modal">                        <span>&times;</span>                    </button>                    <h4 class="modal-title">確認刪除嗎？</h4>                </div>                <div class="modal-body text-right">                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>                    <button type="button" class="btn btn-primary" data-dismiss="modal" @click="remove(nowIndex)">確認</button>                </div>            </div>        </div>    </div></div><script src="resources/js/jquery-1.9.1.min.js"></script><script src="resources/js/bootstrap.min.js"></script><script src="resources/js/vue.js"></script><script>    var vm = new Vue({        el:‘#box‘,        data:{            myData:[],            userName:‘‘,            userAge:‘‘,            nowIndex:‘-100‘ //需要特別注意nowIndex的用法        },        methods:{            add:function(){                this.myData.push({                    name: this.userName,                    age: this.userAge                });                this.userName=‘‘;                this.userAge=‘‘;            },            remove:function(n){                if(n==-2){//如果點擊的是“全部刪除”，則清空整個數組                    this.myData=[];                }else{//如果點擊的是單行內的“刪除”，則刪除該行即可                    this.myData.splice(n,1)                }            }        }    })</script></body></html>

650) this.width=650;" src="http://s4.51cto.com/wyfs02/M01/89/31/wKiom1gK6LWgoU6SAAAqZUSzBAI424.png" title="QQ20161022121733.png" alt="wKiom1gK6LWgoU6SAAAqZUSzBAI424.png" />

本文出自 “dapengtalk” 部落格，請務必保留此出處http://dapengtalk.blog.51cto.com/11549574/1864556

Vue指令實戰：結合bootstrap做一個使用者資訊輸入表格