交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • vue中的过滤器实例代码详解

    过滤器

    1.过滤器规则

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:

    双花括号插值{{}}和  v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

    <!-- 在双花括号中 -->
    {{ name | Upper }}
    <!-- 在 `v-bind` 中 -->
    <div v-bind:id="martin | Upper"></div>

    过滤器分为全局过滤器和本地过滤器,全局过滤器顾名思义就是所有Vue实例挂载的元素内都能使用,而本地过滤器则是指只有过滤器函数所在的Vue实例挂载的元素内可以使用

    全局过滤器:

    Vue.filter('Upper',function (name) {
        return name.toUpperCase();
    });

    本地过滤器:

     var vm=new Vue({
        el: '#app',
        data: {
          name:'martin'
        },
        filters:{
          Upper:function (name) {
            return name.toUpperCase()
          }
        }
      })

    2.串联过滤器

    {{name | filterA | filterB }}

    解释:

    第一步:先把name 放到 filterA过滤器中进行过滤

    第二步:将第一步过滤器的结果再放到 filterB再进行过滤,显示最终过滤结果

    3.过滤器也可以接收参数,因为过滤器说到底只是一个函数

    {{ name | filterA('arg1', arg2) }}

    解释:

    filterA 在这里应该定义为接收三个参数的过滤器函数。其中 name 的值作为第一个参数,字符串 arg1 作为第二个参数,表达式  arg2  的值作为第三个参数。

    最后送给大家一个实例:

    源代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>  <meta charset="UTF-8">
      <title>Title</title>
      <script src="./bootstrap/js/jquery-1.10.1.js"></script>
      <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
      <script src="./bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div id="app">
      <div class="form-inline">
        <label>id:
          <input type="text" class="form-control" placeholder="请输入你的id" v-model="id">
        </label>
        <label>name:
          <input type="text" class="form-control" placeholder="请输入你的name" v-model="name">
        </label>
        <button class="btn btn-success" @click="add">add</button>
        <label>请输入你的搜索关键字:
          <input type="text" class="form-control" placeholder="请输入你的搜索关键字" v-model="keyword">
        </label>
        <button class="btn btn-success" @click="search(keyword)">search</button>
      </div>
      <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>ctime</th>
          <th>operation</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,i) in search(keyword)" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime|dateFormat}}</td>
          <td>
            <a href="#" class="btn btn-success" @click.prevent="">{{item.operation[0]}}</a>
            <a href="#" class="btn btn-success" @click.prevent="del(i)">{{item.operation[1]}}</a>
          </td>
        </tr>
        </tbody>
      </table>
    
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      Vue.filter('dateFormat',function (date) {
        var dy=date.getFullYear();
        var dm=date.getMonth()+1;
        var dd=date.getDate();
        var dh=date.getHours();
        var dm=date.getMinutes();
        var ds=date.getSeconds();
        return `${dy}-${dm}-${dd} ${dh}:${dm}:${ds}`
      });
      var vm=new Vue({
        el: '#app',
        data: {
          keyword:'',
          id:'',
          name:'',
          list:[{id:1,name:'宝马',ctime:new Date(),operation:['add','delete']},
            {id:2,name:'奔驰',ctime:new Date(),operation:['add','delete']},
            {id:3,name:'大众',ctime:new Date(),operation:['add','delete']}
          ]
        },
        methods:{
          add(){
            var curid=this.id;
            var curname=this.name;
            this.list.push({id:curid,name:curname,ctime:new Date(),operation:['add','delete']});
            this.id='';
            this.name='';
          },
          del(i){
            this.list.splice(i,1);
          },
          search(name){
            var arr=[];
            this.list.forEach((item,i)=>{
              if(item.name.indexOf(name)!=-1){
                arr.push(item);
              }
            });
            return arr
          }
        }
      })
    </script>
    </body>
    </html>

    总结

    以上所述是小编给大家介绍的vue中的过滤器实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • vue2过滤器模糊查询方法
    • 在Vue methods中调用filters里的过滤器实例
    • 在vue中使用公共过滤器filter的方法
    • vue.js过滤器+ajax实现事件监听及后台php数据交互实例
    • Vue自定义过滤器格式化数字三位加一逗号实现代码
    • vue 过滤器filter实例详解
    • Vue 过滤器filters及基本用法
    • Vue filters过滤器的使用方法
    • vue货币过滤器的实现方法
    • Vue实现自带的过滤器实例

    广而告之:
    热门推荐:
    JQuery Tips(4) 一些关于提高JQuery性能的Tips

    在选择时,最好以ID选择符作为开头 我想这个很好理解,因为JQuery内部使用document.getElementByID方法进行ID选择,这种方法比其他所有对DOM选择的方法更快,所以以$("#")开头是最好的,比如: 复制代码 代码如下: <div id="a"> <div class="b"> <div clas···

    3种方式实现瀑布流布局小结

    前言 今天逛闲鱼的时候观察到每一行的高度不是相同的,经了解才知道原来这是一种瀑布流布局,感觉挺有意思,于是决定研究一下,在网上也找了一些方案,实现瀑布流大概有3种方式。 一、JS 实现瀑布流 思路分析 瀑布流布局的特点是等宽不等高。 为了让最后一行的差距最小,从第···

    织梦模板dedecms栏目列表分页链接首页与第一页重复的解决

    织梦是优化做得比较好的程序之一,但仍然有一些细节问题没处理好,今天要介绍的就是“织梦dede栏目分页URL链接地址的SEO优化方法” dede的栏目列表分页链接,仔细观察会发现,在栏目的首页会存在两个内容相同的2个不同url: 一个是在其他页面链接的栏目首页url是w···

    对象题目的一个坑 理解Javascript对象

    这一篇的例子,主要是来引起对Javascript对象的理解及注意的。其实是一种面试时的一个坑,实际项目中也是很少用得到,但是为了提高警惕性,我们来看这个例子: 代码名称 var first = {}; var second = {k:"second"}; var third = {k:"third"}; first[second] = 100; first[th···

    帝国CMS7.0多值字段在内容页模板的调用方法

    <?php$daxiao=explode('||||||',$navinfor[daixiao360]);foreach($daxiao as $k=>$v){$daxiao2=explode('::::::',$v); echo '<li>'.$daxiao2[0].' '.$daxiao2[1].'</li>';}?>

    重新封装zend

    复制代码 代码如下: <?php class MyFramework_Soap_server extends Zend_Soap_Server { protected $_login = ''; protected $_password = ''; public function __construct($wsdl = null, array $options = null) { parent::__construct($wsdl,$options); if(isset($o···

    .NET发起web请求时维持Session

    为HttpWebRequest 指定一个CookieContainer,使用同一个CookieContainer的Request就是一个session。 代码如下: 复制代码 代码如下:CookieContainer cc = new CookieContainer(); for(int i=0;i<100;i++) { HttpWebRequest myReq = (HttpWebRequest)WebRequest.Create···

    vue中如何实现后台管理系统的权限控制的方法步骤

    一、前言 在广告机项目中,角色的权限管理是卡了挺久的一个难点。首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单中的页面是否能被访问 页面中的按钮(增、删、改)的权限控制是否显示 下面我们就看一看是如何实···

    js 图片缩放(按比例)控制代码

    缩放代码: 复制代码 代码如下:缩放代码: <script type="text/javascript"> //图片按比例缩放 var flag = false; function DrawImage(ImgD, iwidth, iheight) { //参数(图片,允许的宽度,允许的高度) var image = new Image(); image.src = ImgD.src; if (image.wi···

    MySQL 5.7忘记root密码后修改的详细教程

    前言 一直以来,MySQL的应用和学习环境都是MySQL 5.6和之前的版本,也没有去关注新版本MySQL 5.7的变化和新特性。今天帮人处理忘记root密码的时时候,发现以前的方法不奏效了。 具体情况如下所示: 案例环境如下:         操作系统 : Re···