Vue filter-v-for 使用
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 使用的更多相关文章
- Vue filter介绍及详细使用
Vue filter介绍及其使用 VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果. Vue.js自带了一些默认过滤器例如: capitalize 首字母大写 uppe ...
- vue filter方法-时间格式化
plugins/filter.js import Vue from 'vue' // 时间格式化 // 用法:<div>{{data | dataFormat('yyyy-MM-dd hh ...
- Vue.filter 过滤器
[过滤器] import Vue from '../../../node_modules/vue/dist/vue'; // 后台数据与前端展示数据需要换算,与后台交互的请求的参数是不需要.假如说前端 ...
- vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符
过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...
- 解读vue filter
1.全局filter, 全局的过滤一般在main.js里面使用 <div id="app"> <div> {{testVal | filVal(10,30) ...
- vue filter使用方法
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化. 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 过滤器应该被添加在 JavaScr ...
- vue filter过滤器简单应用
vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...
- vue的过滤器filter
前记: 排版记录,未免太耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2 ...
- Vue 学习笔记 — filter
简书 对将要插入html的对象进行处理 一个简单的Vue示例 基本过滤器用法 带参数的过滤器 全局过滤器 (这张图片有点问题,最后显示的应该是 hello world不是null) 过滤器的简单应用 ...
随机推荐
- monkey压力测试
压力测试: monkey -p com.qihu360.mobilesafe -v -p 后面跟包名 : -v 后面跟次数: 通过观察log日志,查看应用中出现的问题. =============== ...
- Structs复习 OGNL
Dominmodel只有传 User.age 类似的这种Structs才能帮创建对象 Dominmodel User里必须有空的构造方法 OGNL:OBJECT GRAPHIC NAVAGATION ...
- mysql 分配内存大小配置
优化 innodb_buffer_pool_size = 10*1024*1024*1024
- Javascript概念
什么是JavaScript? 1 以前的目的:验证表单输入的正确性. 2 现在的目的:多做一些页面的交互效果. 3 javascript是一个跨平台的脚本语言. 4 网景公司开发的,由布兰登·艾奇最先 ...
- hadoop zookeeper高可用
原文地址: https://blog.csdn.net/dingchenxixi/article/details/51131493 core-site.xml yarn-site.xml
- 04_web基础(八)之车票实现增删改查初级版本
43.web页面显示车票列表简略完成 代码: 控制层代码 package com.day03.station.controller; import com.day03.station.model.Ti ...
- Centos7安装出现的问题:找不到安装源或者检查软件配置出错
安装启动时到以下界面 此时,按一下Tab键,将会出现在屏幕下方出现这一串文字 vmlinuz initrd=initrd.img inst.stage2=hd:LABEL=CentOS\x207\x2 ...
- 解决在linux环境安装setuptools的相关错误
RuntimeError: Compression requires the (missing) zlib module 缺少zlib包 解决方案 yum install zlib yum i ...
- tensorflow(深度学习框架)详细讲解及实战
还未完全写完,本人会一直持续更新!~ 各大深度学习框架总结和比较 各个开源框架在GitHub上的数据统计,如下表: 主流深度学习框架在各个维度的评分,如下表: Caffe可能是第一个主流的工业级深度学 ...
- Android 支付宝/微信支付结果判断
微信支付结果码 private static final int PAY_OK = 0; //交易成功 private static final int PAY_ERR = -1; //交易失败 pr ...