vue过滤器使用方法

过滤器分全局过滤器和局部过滤器。和自定义指令一样，过滤器对应的函数中的this是window（无论是全局的还是局部的），而不是当前vue的实例。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Document</title>
</head><body><div id="app"><!-- 过滤器可以传递参数 --><h1>{{name|money(name,age)}}</h1><h1>{{name|money(name,age)|newName}}</h1></div><script src="../node_modules/vue/dist/vue.js"></script><script>/* 过滤器：全局过滤器和局部过滤器*/// 全局过滤器Vue.filter('money', function(){// 过滤器中的this是windowconsole.log(this); // windowconsole.log(arguments);  // arguments的第一项是 管道符 前面表达式对应的值，后面依次是使用过滤器时传递的实参// 过滤器和计算属性一样，一定要return一个值return '我是过滤器'; // 页面上最后展示的是过滤器return的值});Vue.filter('newName', function(val){console.log(val); // 获取的是前面过滤器return的值return '我是新的过滤器'})let vm = new Vue({el: '#app',data: {name: '测试',age:100},// 局部过滤器filters: { // 过滤器中的this是window，而不是当前实例；过滤器不会被挂载到当前实例上newName(val) { // 有私有的优先使用私有的console.log(val);console.log(this); // windowreturn '我是私有过滤器'}}});// 注意：过滤器不会被挂载到当前实例上 console.log(vm.newName); // undefined</script>
</body></html>

vue过滤器使用方法相关推荐

vue 2.0 filter html,vue.filter使用方法是什么
vue.filter使用方法:对值进行筛选加工,代码为[ {{ msg }} v-bind]. vue.filter使用方法: 在Vue中filter过滤器是一个非常强大的功能. 个人觉得称它为加工车 ...
web前端技巧分享：vue过滤器的那点事！
关于vue的过滤器,其实在vue1.0的时候是内置了过滤器的,但是自从到了2.0之后就被去掉了,但是我们可能还会使用到,所以就需要自己定义过滤器了,下面小千就带你了解一下如何定义过滤器和过滤器都有哪些 ...
带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
vue过滤器的那点事
关于vue的过滤器,其实在vue1.0的时候是内置了过滤器的,但是自从到了2.0之后就被去掉了,但是我们可能还会使用到,所以就需要自己定义过滤器了,下面小千就带你了解一下如何定义过滤器和过滤器都有哪些 ...
Vue过滤器：第二天
Vue过滤器简介 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器分为全局过滤器和私有过滤器. 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0 ...
Vue3的filter过滤器代替方法
Vue3的过滤器代替方法前言一.使用步骤 1.vue2的filter 2.vue3的computed 总结前言最近博主从vue2转到vue3,惊奇的发现vue2里面的filter在vue3中不 ...
Vue 过滤器、计算属性、侦听器图解版一目了然
文章目录本篇学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法情况1: 根 ...
一个简单的Vue过滤器
一个简单的Vue过滤器什么是过滤器: 是一种数据处理的方式,它并不是一定需要使用的. 如果不用过滤器的话,用 methods 或者 computed 配置项也可以实现. 演示一个简单的过滤器,把时间 ...
Vue过滤器的几种用法
Vue过滤器的几种用法本文主要介绍Vue项目中filter的几种用法. 一. 单独在组件或者是页面中使用单独在页面或者是组件中使用vue filter比较简单,主要是用在{{ }} 和v-bind ...

vue过滤器使用方法

vue过滤器使用方法

vue过滤器使用方法相关推荐

最新文章

热门文章