使用vue，vue-resource，實現 關鍵字 filter

實例效果

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-demo</title>
    <script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
</head>
<body>
<div class="manmsg" id="left">
        <h4>人員信息</h4>
        <input type="text"  v-model="query">
        <table id="table2">
            <thead>
            <tr>
                <th><input type="checkbox"  class="allcheck"></th>
                <th>序號</th>
                <th>姓名</th>
                <th>聯系方式</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="data in list | filterBy query">
                        <td ><input type='checkbox' Id="+data.empId+" ></td>
                        <td v-text="data.empId"></td>
                        <td v-text="data.empName"></td>
                        <td v-text="data.phoneNo"></td>
                </tr>
            </tbody>

        </table>

    </div>
</body>
<script>
    new Vue({
        el: "#left",
        data: function (){
            return {
                query:"",
                list:""
            }
        },
        ready:function(){
            if (!window.location.origin) {
                window.location.origin = window.location.protocol + "http://" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
            }
            var ctx = window.location.origin;
            var url =  ctx + "/personResponsible/getPersonResponsible.do";//請求地址
            var _self = this;
            Vue.http.get(url).then(function (res){
                _self.list = res.data.result.pagedata;
            })
    })

</script>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容