vue中filter用法总结
这次给大家带来vue中filter用法总结，vue中filter使用的注意事项有哪些，下面就是实战案例，一起来看一下。
1、自定义的过滤器，当然这包括注册在全局和注册在实例化的内部
（1）注册在全局的fliter
(1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
(2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算
(3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突
(4)用户从input输入的数据在回传到model之前也可以先处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue自定义过滤器</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<p class="test">
<p>{{message | sum}}</p>
<p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
<p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
<input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
</p>
<script type="text/javascript">
// -----------------------------------------华丽分割线(从model->view)---------------------------------------
Vue.filter("sum", function(value) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
return value + 4;
});
Vue.filter('cal', function (value, begin, xing) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
return value + begin + xing;
});
// -----------------------------------------华丽分割线(从view->model)---------------------------------------
Vue.filter("change", {
read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
return value;
},
write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
console.log("newVal:"+newVal);
console.log("oldVal:"+oldVal);
return newVal;
}
});
var myVue = new Vue({
el: ".test",
data: {
message:12
}
});
</script>
</body>
</html>filter是默认会传入当前的item，而且filter的第一个参数默认就是当前的item。
（2）注册在实例化内部
上面的例子直接注册在Vue全局上面,其他不用这个过滤器的实例也会被迫接受,其实过滤器可以注册在实例内部,仅在使用它的实例里面注册
上面的程序改写为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue自定义过滤器</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<p class="test">
<p>{{message | sum}}</p>
<p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
<p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
<input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
</p>
<script type="text/javascript">
Vue.filter("change", {
read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
return value;
},
write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
console.log("newVal:"+newVal);
console.log("oldVal:"+oldVal);
return newVal;
}
});
var myVue = new Vue({
el: ".test",
data: {
message:12
},
filters: {
sum: function (value) {
return value + 4;
},
cal: function (value, begin, xing) {
return value + begin + xing;
}
}
});
</script>
</body>
</html>2、使用js中的迭代函数filter
（1）实例一原文
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;
//在使用filter时需要注意的是，前面调用的是需要使用filter的数组，而给filter函数传入的是数组中的每个item，也就是说filter里面的函数，是每个item要去做的，并将每个结果返回。
return shoppingList.filter(function (item) {
return item.toLowerCase().indexOf(key.toLowerCase()) != -1
});;
}
}
})
<ul>
Filter Key<input type="text" v-model="key">
<li v-for="item in filterShoppingList">
{{ item }}
</li>
</ul>最终效果实现了根据关键字来过滤列表的功能。
其他的一些Js 迭代方法——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是vue中filter用法总结的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
解析JSP注释的使用方法和分类
Feb 01, 2024 am 08:01 AM
JSP注释的分类及用法解析JSP注释分为两种：单行注释：以结尾，只能注释单行代码。多行注释：以/*开头，以*/结尾，可以注释多行代码。单行注释示例多行注释示例/**这是一段多行注释*可以注释多行代码*/JSP注释的用法JSP注释可以用来注释JSP代码，使其更易于阅
总结Linux系统中system()函数的用法
Feb 23, 2024 pm 06:45 PM
Linux下system()函数的总结在Linux系统中，system()函数是一个非常常用的函数，它可以用于执行命令行命令。本文将对system()函数进行详细的介绍，并提供一些具体的代码示例。一、system()函数的基本用法system()函数的声明如下：intsystem(constchar*command);其中，command参数是一个字符
如何正确使用C语言的exit函数
Feb 18, 2024 pm 03:40 PM
c语言exit函数怎么用，需要具体代码示例在C语言中，我们常常需要在程序中提前终止程序的执行，或者在某个特定的条件下退出程序。C语言提供了exit()函数来实现这个功能。本文将介绍exit()函数的用法，并提供相应的代码示例。exit()函数是C语言中的标准库函数，它包含在头文件中。它的作用是终止程序的执行，并且可以带一个整型
WPSdatedif函数的用法
Feb 20, 2024 pm 10:27 PM
WPS是一款常用的办公软件套件，其中的WPS表格功能被广泛使用于数据处理和计算。在WPS表格中，有一个非常有用的函数，即DATEDIF函数，它用于计算两个日期之间的时间差。DATEDIF函数是英文单词DateDifference的缩写，它的语法如下：DATEDIF(start_date,end_date,unit)其中，start_date表示起始日期
Python函数介绍：abs函数的用法和示例
Nov 03, 2023 pm 12:05 PM
Python函数介绍：abs函数的用法和示例一、abs函数的用法介绍在Python中，abs函数是一个内置函数，用于计算给定数值的绝对值。它可以接受一个数字参数，并返回该数字的绝对值。abs函数的基本语法如下：abs(x)其中，x是要计算绝对值的数值参数，可以是整数或浮点数。二、abs函数的示例下面我们将通过一些具体的示例来展示abs函数的用法：示例1：计算
Python函数介绍：isinstance函数的用法和示例
Nov 04, 2023 pm 03:15 PM
Python函数介绍：isinstance函数的用法和示例Python是一门功能强大的编程语言，提供了许多内置函数，使得编程变得更加方便和高效。其中一个非常有用的内置函数是isinstance()函数。本文将介绍isinstance函数的用法和示例，并提供具体的代码示例。isinstance()函数用于判断一个对象是否是指定的类或类型的实例。该函数的语法如下
MySQL ISNULL 函数详解及用法介绍
Mar 01, 2024 pm 05:24 PM
MySQL中的ISNULL()函数是用于判断指定表达式或列是否为NULL的函数。它返回一个布尔值，如果表达式为NULL则返回1，否则返回0。ISNULL()函数可以在SELECT语句中使用，也可以在WHERE子句中进行条件判断。1.ISNULL()函数的基本语法：ISNULL(expression)其中，expression是要判断是否为NULL的表达式或
使用苹果快捷指令的方法
Feb 18, 2024 pm 05:22 PM
苹果快捷指令怎么用随着科技的不断发展，手机已经成为了人们生活中不可或缺的一部分。而在众多手机品牌中，苹果手机凭借其稳定的系统和强大的功能一直备受用户的喜爱。其中，苹果快捷指令这一功能更是让用户们的手机使用体验更加便捷和高效。苹果快捷指令是苹果公司为其iOS12及更高版本推出的一项功能，通过创建和执行自定义指令，帮助用户简化手机操作流程，以达到更高效的工作和
