Vue入门三、过滤器filter

Vue中过滤器有两种：
1、全局过滤器Vue.filter('过滤器名',过滤方式fn);
2、组件内过滤器filters:{'过滤器名',过滤方式fn}
使用:{{msg|过滤器方法名}}

一、局部过滤器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">我输入的：<input type="text" v-model="instring"><br>正常输出的：{{instring}} <br>反转输出：{{instring|rever}} <br>{{instring|revers('反转输出：')}} <br>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">new Vue({el: '#app',data() {return {instring: ''}},// 局部过滤器filters: {// 默认第一个变量为参数rever(val) {// 将输入的字符逐个分割进行反转再对得到的字符进行拼接return val.split("").reverse().join("")},revers(val, args) {// 将输入的字符逐个分割进行反转再对得到的字符进行拼接return args + val.split("").reverse().join("")}}})
</script>
</body>
</html>

二、全局过滤器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">我输入的：<input type="text" v-model="instring"><br>正常输出的：{{instring}} <br>{{instring|revers('反转输出：')}}
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">// 全局过滤器// val={{instring}} args={{'反转输出：'}}Vue.filter('revers', function (val, args) {return args + val.split('').reverse().join('')})new Vue({el:'#app',data(){return {instring:''}}})
</script></body>
</html>

转载于:https://blog.51cto.com/12012821/2397649

Vue入门三、过滤器filter相关推荐

Vue中的过滤器(filter)
一.Vue中的过滤器是什么过滤器(filter)是输送介质管道上不可缺少的一种装置,大白话,就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用 ...
手动撸代码实现Vue管道符过滤器filter功能
前言管道符的外观就是一根竖直线,也就是|.这个熟悉Linux的同学肯定不陌生了.而在Vue中,也常常能看见它的身影.比如Vue的过滤器: <div>我叫:{{name|nameFilte ...
Vue的过滤器(filter)
在Vue.js中,过滤器主要用于文本的格式化,或者数组数据的过滤与排序等.从Vue.js2.0.0版本开始,内置的过滤器被删除了,如果使用过滤器,需要自己编写.过滤器可以用在两个地方:双花括号插值和v ...
vue(vue-cli+vue-router)+babel+webpack项目搭建入门(三)
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<三> 本系列文章将介绍基于vue+webpack的前端项目的构建过程.文章分为四章内容,第一章介绍开 ...
Vue过滤器-filter
Vue中的过滤器不能替代Vue中的methods.computed或者watch,因为过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本.在很多不同的情况下,过滤器都是有用的,比如尽 ...
Vue.js中过滤器（filter）的使用
Vue.js 过滤器的基本使用(filter) vue中的过滤器分为两种:局部过滤器和全局过滤器.全局过滤器定义在vue类中,句柄过滤器定义在vue实例中. 1.定义无参全局过滤器 Vue.filte ...
如何在vue上全局使用过滤器filter
如何在vue上全局使用过滤器filter 在src下新建文件夹utils,创建filter.js文件 import Vue from 'vue'Vue.filter("publishdate ...
methods vue过滤器和_Vue.js入门教程-过滤器
一.过滤器 1.1 概述 (1)过滤器(Filters)提供了一种执行文本转换的方法,比如说都转换成大写字母或者几乎做任何我们想做的事情. (2)过滤器既可以在双花括号插值中使用,也可以在 v- ...
VUE入门笔记，第二节
VUE入门笔记,第二节一.总结以上:实例-表格列表 [目标:实现表格数据的添加.删除和过滤筛选] [解决方案] <!DOCTYPE html> <html lang="e ...

Vue入门三、过滤器filter

一、局部过滤器

二、全局过滤器

Vue入门三、过滤器filter相关推荐

最新文章

热门文章