解读vue filter
1.全局filter, 全局的过滤一般在main.js里面使用
<div id="app">
<div>
{{testVal | filVal(10,30)}}
</div>
</div>
<script>
Vue.filter('filVal', function(val, first, second) {
return val + first + second;
});
new Vue({
el: '#app',
data:
testVal: 20
},
})
</script>
2.局部filter, filter要放在new vue里面, 此时filter要加上s==>filters
new Vue({
el: '#app',
data: {
testVal: 20
},
methods: { },
filters: {
filVal: function(val, val1, val2) {
return val + val1 + val2
}
}
})
不管是全局过滤还是布局过滤,都是可以传多个值得 ,渲染时用管道符分隔. 在上面传的三个值中,第一个是要过滤的值, 后面的值是过滤传的参数
3,添加多个filter
<div id="app">
<div>
{{testVal | filVal1(10,30) | filVal2("測試") | filVal3("====")}}
</div>
</div> <script>
new Vue({
el: '#app',
data: {
testVal: 20,
filTest: "測試測試"
},
methods: { },
filters: {
filVal1: function(val, val1, val2) {
return val + val1 + val2
},
filVal2: function(val, val2) {
return val + val2
},
filVal3: function(val, val2) {
return val + val2
},
}
})
</script>
解读vue filter的更多相关文章
- Vue filter介绍及详细使用
Vue filter介绍及其使用 VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果. Vue.js自带了一些默认过滤器例如: capitalize 首字母大写 uppe ...
- 入口开始,解读Vue源码(一)-- 造物创世
Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一 ...
- 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使用方法
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化. 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 过滤器应该被添加在 JavaScr ...
- petite-vue源码剖析-逐行解读@vue/reactivity之reactive
在petite-vue中我们通过reactive构建上下文对象,并将根据状态渲染UI的逻辑作为入参传递给effect,然后神奇的事情发生了,当状态发生变化时将自动触发UI重新渲染.那么到底这是怎么做到 ...
- vue filter过滤器简单应用
vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...
随机推荐
- git submodule删除多余模块
rm -rf 子模块目录 删除子模块目录及源码 vi .gitmodules 删除项目目录下.gitmodules文件中子模块相关条目 vi .git/config 删除配置项中子模块相关条目 rm ...
- 修改 linux 默认字符集
[root@eric6 ~]# cat /etc/sysconfig/i18n //查看 linux 默认的字符集,默认是 UTF-8 LANG="zh_CN.UTF-8" cp ...
- 测试员小白必经之路----常见的linux操作命令
linux作为服务器操作系统 linux具有自己的优势,安全.稳定.免费.占有率高 操作系统发展历史 unix>minix>linux linux命令的基本使用 查阅命令帮助信息 comm ...
- [POI2006]ORK-Ploughing(贪心,枚举)
[POI2006]ORK-Ploughing 题目描述 Byteasar, the farmer, wants to plough his rectangular field. He can begi ...
- django之重定向redirect
一:redirect的场景 加入登录成功后,需要跳转到主页:登录退出后,跳转到主页面.
- 怎么在tensorflow中打印graph中的tensor信息
from tensorflow.python import pywrap_tensorflow import os checkpoint_path=os.path.join('./model.ckpt ...
- margin 和padding 的区别
margin是用来隔开元素与元素的间距:padding是用来隔开元素与内容的间隔.margin用于布局分开元素使元素与元素互不相干: padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元 ...
- Redis之数据类型
一.概念: Redis:一个开源.支持网络.基于内存.键值对存储数据库. 特点:它可以支持多种数据类型. 二.数据类型 1)Redis String 具体说明: 一般的普通的k到v一个映射是Strin ...
- FPGA设计中遇到的奇葩问题之“芯片也要看出身”
FPGA设计中遇到的奇葩问题之“芯片也要看出身”(一) 昨夜西风凋碧树.独上高楼,望尽天涯路 2000年的时候,做设计基本都是使用Xilinx公司的Virtex和Virtex-E系列芯片.那时候Alt ...
- CoreData新增字段
1. 在模型文件的Entity里面增加字段名 2. Xcode工具栏选择Edtor->Creat NSManagerObject SubClass->...->生成新的关联文件 3. ...