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>
<div 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之前也可以先处理-->
</div>
<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>
<div 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之前也可以先处理-->
</div>
<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()
总结
以上所述是小编给大家介绍的vue 中filter的多种用法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
您可能感兴趣的文章:
- vue.js的computed,filter,get,set的用法及区别详解
- Vue 过滤器filters及基本用法
相关推荐
-
Vue 过滤器filters及基本用法
1.示例代码 采用vue单文件组件,使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> <script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { dat
-
vue.js的computed,filter,get,set的用法及区别详解
1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa
-
vue 中filter的多种用法
1.自定义的过滤器,当然这包括注册在全局和注册在实例化的内部 (1)注册在全局的fliter (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数.带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也可以先处理 <!DOCTYPE html> <html> <head>
-
Vue 中 filter 与 computed 的区别与用法解析
watch与computed.filter: watch:监控已有属性,一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法 filter:js中为我们提供的一个方法,用来帮助我们对数据进行筛选 watch与computed的区别: 1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性 2.watch不会缓存数据,每次打开页面都会重新加载一次, 但是computed如果之前进行过计算他会将计算的结果
-
vue 中 命名视图的用法实例详解
今天主要记录 vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面里面可能有多个组件,比如侧边栏,内容区,侧边栏是一个组件.内容区是一个组件,我们普遍会将两个组件作为子组件添加到主页面中,因为页面中只有一个 router-view视图,那么问题来了,怎么让一个页面中有多个视图呢,拥有多个视图,很随意,多写几个router-view标签就行了,但是每个router-
-
详解Vue中watch的详细用法
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: ''' <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } }) ''' 直接写一个监听处理函数,当每次监听到
-
vue中 v-for循环的用法详解
1.v-for循环普通数组 ①创建vue对象 ② 循环数据 结果: 2.v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组 结果: 3.v-for循环对象 ①创建vue对象实例 ②循环对象 结果: 4.v-for循环数字 ①创建vue对象实例 ②循环数字 结果: 5.v-for中key的使用方式 ①创建vue对象实例 注意:push()方法一般是添加到数组的最后的位置:unshift()方法是往最前面的位置添加. ②循环 注意: v-for循环的时候,key属性只能使用number
-
详解Shell 脚本中 “$” 符号的多种用法
通常情况下,在工作中用的最多的有如下几项: $0:Shell 的命令本身 1到9:表示 Shell 的第几个参数 $? :显示最后命令的执行情况 $#:传递到脚本的参数个数 $$:脚本运行的当前进程 ID 号 $*:以一个单字符串显示所有向脚本传递的参数 $!:后台运行的最后一个进程的 ID 号 $-:显示 Shell 使用的当前选项 ...... 今天将通过以上几种选项并做进一步的操作案例: 1.引用变量 引用变量时,使用 $ 符号直接来进行引用,以及包括循环变量: [root@localho
-
vue中插槽整理及用法分析
本教程操作环境:windows7系统.vue2.9.6版,DELL G3电脑. vue的插槽(slot)主要分三种: 默认插槽,具名插槽,作用域插槽 vue中的插槽,指的是子组件中提供给父组件使用的一个占位符: 用标签表示,父组件可以在这个占位符中填充任何模板代码,比如HTML.组件等,填充的内容会替换掉子组件的标签(替换占位符). 默认插槽 默认插槽是最简单的一种插槽,和上面的描述一致,就是通过替换占位符达到在父组件中更改子组件中内容的效果. 语法: 在子组件中放置一个占位符(slot): <
-
Vue中axios的基本用法详解
目录 1.什么是axios? 2.axios的特征 3.axios在使用的时候需要注意的细节 4.axios在vue中的实例运用(留言评论接口) App.vue代码 mian.js代码 1.什么是axios? axios 是一个基于promise用于浏览器和 nodejs 的 HTTP 客户端.简单的理解就是ajax的封装 2.axios的特征 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应
-
Vue 中v-model的完整用法及原理
目录 一. v-model的基本使用 二. v-model的原理 三. v-model结合radio类型使用 四. v-model结合复选框类型使用 五. v-model结合select 六. v-model的修饰符的使用 一. v-model的基本使用 v-model双向绑定,既输入框的value改变,对应的message对象值也会改变,修改message的值,input的value也会随之改变.无论改变那个值,另外一个值都会变化. <!DOCTYPE html> <html lang
-
Vue中v-on的基础用法、参数传递和修饰符的示例详解
一.v-on的基本用法 使用v-on:click给button绑定监听事件以及回调函数,@是v-on:的缩写,也就是简写也可以使用@click.方法一般是需要写方法名加上(),在@click中可以省掉,如上述的<button @click="increment">加</button>. 以简单的计数器为例 <body> <div id="app"> <h2>{{count}}</h2> <