var app5 = new Vue({
        el: '#app5',
        data: {
            shoppingList: [
                "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
            ],
            key: ""
        },
        computed: {
            filterShoppingList: function () {
                // `this` points to the vm instance
                var key = this.key;
                var shoppingList = this.shoppingList;
                return shoppingList.filter(function (item) {
                    return item.toLowerCase().indexOf(key.trim().toLowerCase()) != -1
                    //toLowerCase方法用于把字符串转换为小写。
                });;
            }
        }
    });
    <div class="app5">
        <div id="app5">
        <h2>Vue-for</h2>
        <ul>
            <li v-for="item in shoppingList">
                {{ item }}
            </li>
        </ul>
        <h2>Vue-for filter实现</h2>
        <ul>
            Filter Key<input type="text" v-model="key">
            <li v-for="item in filterShoppingList">
                {{ item }}
            </li>
        </ul>
    </div>    

    </div>

Vue filter-v-for 使用的更多相关文章

  1. Vue filter介绍及详细使用

    Vue filter介绍及其使用 VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果. Vue.js自带了一些默认过滤器例如: capitalize 首字母大写 uppe ...

  2. vue filter方法-时间格式化

    plugins/filter.js import Vue from 'vue' // 时间格式化 // 用法:<div>{{data | dataFormat('yyyy-MM-dd hh ...

  3. Vue.filter 过滤器

    [过滤器] import Vue from '../../../node_modules/vue/dist/vue'; // 后台数据与前端展示数据需要换算,与后台交互的请求的参数是不需要.假如说前端 ...

  4. vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  5. VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符

    过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...

  6. 解读vue filter

    1.全局filter, 全局的过滤一般在main.js里面使用 <div id="app"> <div> {{testVal | filVal(10,30) ...

  7. vue filter使用方法

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化. 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 过滤器应该被添加在 JavaScr ...

  8. vue filter过滤器简单应用

    vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...

  9. vue的过滤器filter

    前记: 排版记录,未免太耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2 ...

  10. Vue 学习笔记 — filter

    简书 对将要插入html的对象进行处理 一个简单的Vue示例 基本过滤器用法 带参数的过滤器 全局过滤器 (这张图片有点问题,最后显示的应该是 hello world不是null) 过滤器的简单应用 ...

随机推荐

  1. monkey压力测试

    压力测试: monkey -p com.qihu360.mobilesafe -v -p 后面跟包名 : -v 后面跟次数: 通过观察log日志,查看应用中出现的问题. =============== ...

  2. Structs复习 OGNL

    Dominmodel只有传 User.age 类似的这种Structs才能帮创建对象 Dominmodel User里必须有空的构造方法 OGNL:OBJECT GRAPHIC NAVAGATION ...

  3. mysql 分配内存大小配置

    优化 innodb_buffer_pool_size  = 10*1024*1024*1024

  4. Javascript概念

    什么是JavaScript? 1 以前的目的:验证表单输入的正确性. 2 现在的目的:多做一些页面的交互效果. 3 javascript是一个跨平台的脚本语言. 4 网景公司开发的,由布兰登·艾奇最先 ...

  5. hadoop zookeeper高可用

    原文地址: https://blog.csdn.net/dingchenxixi/article/details/51131493 core-site.xml yarn-site.xml

  6. 04_web基础(八)之车票实现增删改查初级版本

    43.web页面显示车票列表简略完成 代码: 控制层代码 package com.day03.station.controller; import com.day03.station.model.Ti ...

  7. Centos7安装出现的问题:找不到安装源或者检查软件配置出错

    安装启动时到以下界面 此时,按一下Tab键,将会出现在屏幕下方出现这一串文字 vmlinuz initrd=initrd.img inst.stage2=hd:LABEL=CentOS\x207\x2 ...

  8. 解决在linux环境安装setuptools的相关错误

    RuntimeError: Compression requires the (missing) zlib module 缺少zlib包 解决方案     yum install zlib yum i ...

  9. tensorflow(深度学习框架)详细讲解及实战

    还未完全写完,本人会一直持续更新!~ 各大深度学习框架总结和比较 各个开源框架在GitHub上的数据统计,如下表: 主流深度学习框架在各个维度的评分,如下表: Caffe可能是第一个主流的工业级深度学 ...

  10. Android 支付宝/微信支付结果判断

    微信支付结果码 private static final int PAY_OK = 0; //交易成功 private static final int PAY_ERR = -1; //交易失败 pr ...