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 相关文章推荐
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
JavaScript的document对象和window对象详解
Dec 30 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
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
星际流派综述
2020/03/04 星际争霸
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php实现删除空目录的方法
2015/03/16 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
Python中list初始化方法示例
2016/09/18 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python统计中文字符数量的两种方法
2019/01/31 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
Python中包的用法及安装
2020/02/11 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
几道数据库的面试题或笔试题
2014/05/31 面试题
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
爱岗敬业演讲稿
2014/05/05 职场文书
环保倡议书400字
2014/05/15 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle