vue filters过滤器
vue filters过滤器
vue.js允许我们自定义过滤器，可被使用于一些常见的文本格式化，过滤器可以用在两个地方，双花括号插值和 v-bind表达式。最常见的就是双花括号插值。
比如如下代码：
{{message | filters2 | filters3(true, priceCount)}}
过滤器函数filters2接收到的第一个参数就是message的值，message的值将作为参数传入到filter2函数中，然后继续调用同样被定义为接收单个参数的
过滤器函数，因此filter3的第一个参数也是message的值，第二个参数是true，第三个参数是 priceCount.
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style> </style>
</head>
<body>
<div id="app">
{{message | filters2 | filters3(true, priceCount)}}
</div>
</body>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 100,
priceCount: .8
},
filters: {
filters2: function(arg) {
console.log("arg: " +arg);
if (arg > 90) {
return arg - 8;
} else {
return arg;
}
},
filters3: function(arg1, arg2, arg3) {
var res;
console.log("arg1: "+arg1);
console.log("arg2: "+arg2);
console.log("arg3: "+arg3);
if (arg2) {
res = (arg1 * 10 * arg3) / 10;
console.log("result"+res);
return res;
} else {
res = arg1;
console.log("result"+res);
return res;
}
}
}
})
</script>
</html>
vue filters过滤器的更多相关文章
- Vue -- filters 过滤器、倒计时效果
局部过滤器 时间.***号 <div id="wrapper" class="wrapper" style="display: none;&qu ...
- vue filters过滤器的使用
说的很详细 https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html
- 六、vue基础--过滤器定义
七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...
- Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;
add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...
- Vue学习之--------Vue中过滤器(filters)的使用（代码实现）（2022/7/18）
1.过滤器 1.1 概念 过滤器: 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理). 语法: 1.注册过滤器:Vue.filter(name,callback) 或 new V ...
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue filter过滤器简单应用
vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...
- vue的过滤器
Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...
- vue自定义过滤器的创建和使用
1.简单介绍 过滤器的作用:实现数据的筛选.过滤.格式化. 过滤器的本质是一个有参数,有返回值的方法. 过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...
随机推荐
- 5.数码相框-额外项目电子书总结,并使用svgalib库
在LCD显示任意编码的文本文件,类似电子书 怎样在LCD上显示文件: 需要哪几个文件? 1.顶部文件 通过main.c分析命令行的操作,然后初始化各个管理文件下的结构体,比如DisplayInit() ...
- 深入理解Java 8 Lambda（类库篇）
背景(Background) 自从lambda表达式成为Java语言的一部分之后,Java集合(Collections)API就面临着大幅变化.而 JSR 355(规定了 Java lambda 表达 ...
- Servlet—Cookie(显示用户上次访问时间、显示商品浏览历史)
1 . 什么是会话? 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 1.1 会话过程中要解决的一些问题? 每个用户在使用浏览器 ...
- js判断数据类型的四种方法
1.typeof typeof是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型.返回的结果用该类型的字符串(全小写字母)形式表示,包括number,string,boolean,und ...
- blfs（systemv版本）学习笔记-配置远程访问和管理lfs系统
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 要实现远程管理和配置lfs系统需要配置以下软件包: 前几页章节脚本的配置:https://www.cnblogs.com/ren ...
- Centos 7.x 安装 Docker-ce
Centos 下安装 Docker-ce CentOS 7.0, CentOS 7.2: cat > /etc/yum.repos.d/docker-main.repo << -'E ...
- 理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
ajax的4种方法:$.get.$.post.$getJSON.$ajax. 1.$.get $.get()方法使用GET方式来进行异步请求,它的语法结构为: $.get( url [, data] ...
- Power BI 与 Azure Analysis Services 的数据关联：2、Azure Analysis Services与 本地版本的 SQL Analysis Services 连接
Power BI 与 Azure Analysis Services 的数据关联:2.Azure Analysis Services与 本地版本的 SQL Analysis Services ...
- ArcGIS Arcade
ArcGIS Arcade http://127.0.0.1/Resource/JavaScript/arcgis_js_api/sdk/4.10/latest/guide/arcade/index. ...
- Kotlin入门(15)独门秘笈之特殊类
上一篇文章介绍了Kotlin的几种开放性修饰符,以及如何从基类派生出子类,其中提到了被abstract修饰的抽象类.除了与Java共有的抽象类,Kotlin还新增了好几种特殊类,这些特殊类分别适应不同 ...