Vue3不支持Filters过滤器的问题


Posted in Javascript onSeptember 24, 2020

filters过滤器已从Vue 3.0中删除,不再支持。

2.x 语法

在2.x中,开发人员可以使用过滤器来处理常见的文本格式。

<template>
 <h1>Bank Account Balance</h1>
 <p>{{ accountBalance | currencyUSD }}</p>
</template>
<script>
 export default {
  props: {
   accountBalance: {
    type: Number,
    required: true
   }
  },
  filters: {
   currencyUSD(value) {
    return '$' + value
   }
  }
 }
</script>

虽然这看起来很方便,但它需要一个自定义语法,打破大括号内表达式“只是JavaScript”的原则,这既增加了学习成本,也增加实现逻辑的成本。

3.x 更新

在3.x中,过滤器被删除,不再受支持。相反,我们建议用方法调用或计算属性替换它们。

下面的例子是一个实现类似功能的。

<template>
 <h1>Bank Account Balance</h1>
 <p>{{ accountInUSD }}</p>
</template>

<script>
 export default {
  props: {
   accountBalance: {
    type: Number,
    required: true
   }
  },
  computed: {
   accountInUSD() {
    return '$' + this.accountBalance
   }
  }
 }
</script>

官方建议用计算属性或方法代替过滤器,而不是使用过滤器。

到此这篇关于Vue3不支持Filters过滤器的问题的文章就介绍到这了,更多相关Vue3 Filters过滤器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
canvas绘制环形进度条
Feb 23 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 #Javascript
vue实现日历表格(element-ui)
Sep 24 #Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 #Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 #Javascript
vue-router 控制路由权限的实现
Sep 24 #Javascript
vue+elementUI实现简单日历功能
Sep 24 #Javascript
JavaScript获取时区实现过程解析
Sep 24 #Javascript
You might like
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
js判断浏览器的比较全的代码
2007/02/13 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
python计算最小优先级队列代码分享
2013/12/18 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
python模块之StringIO使用示例
2015/04/08 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
经营理念口号
2014/06/21 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
商场营业员岗位职责
2015/04/14 职场文书
婚礼长辈答谢词
2015/09/29 职场文书