欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用vue，vue-resource，实现 关键字 filter

程序员文章站 2022-05-18 20:46:11
...

实例效果

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-demo</title>
    <script src="//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 + "//" + 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>

转载于:https://www.jianshu.com/p/4daa59ed9938

上一篇： Naxsi 配置白名单

下一篇： vue页面实现文本关键字检索，关键字高亮显示及定位功能

推荐阅读