vue3使用计算属性computed代替vue2过滤器filter

最新推荐文章于 2024-02-04 10:20:45 发布

Jyann~

最新推荐文章于 2024-02-04 10:20:45 发布

阅读量484

点赞数

分类专栏： Vue 前端文章标签： javascript vue3计算属性

本文链接：https://blog.csdn.net/qq_34569497/article/details/131083661

版权

前端同时被 2 个专栏收录

173 篇文章 15 订阅

订阅专栏

Vue

89 篇文章 7 订阅

订阅专栏

将formatPrice函数提取到common.js公共文件中导出，然后在组件中导入并使用，创建计算属性getPrice，动态绑定goods.goods_price到视图上，实现价格格式化显示。

摘要由CSDN通过智能技术生成

1.提取公共方法文件到common.js:

function formatPrice(price) {
	return '￥' + price.toFixed(2);
}

export {
	formatPrice
}

2.引入common.js，并使用计算computed监听动态值

	import { formatPrice } from "@/utils/common"

...
		computed:{
			getPrice(){
				return formatPrice;
			}
		},

3.页面使用计算属性即可

<view class="old-price">{{getPrice(goods.goods_price)}}</view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Jyann~

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue2用计算属性（computed）替代过滤器（filter）的问题

weixin_44646986的博客

01-23

1626

在Vue2里面一般处理文本比如时间格式化，文本替换等操作时，很容易想到使用filter，但是这有个问题，filter里面是没有this的，如果想使用到Vue实例只能换成computed或者method，比如下面这个例子： <template> <view> <view v-for="(item,index) in list" :key="index">  <Item :content="item.t

计算属性computed、过滤器定义Vue.filter()

YY的博客

11-22

827

计算属性/过滤器定义Vue.filter()

参与评论您还未登录，请先登录后发表或查看评论

在vue3中实现filters过滤器功能

前端打工人的博客

02-06

4353

中的过滤器，但是变相一下，可以在双括号表达式中使用方法，所以也是可以间接实现的，功能简单，请看下面实例代码。

vue3 通过计算属性和methods代替 filter 过滤器实现组件中作用域插槽时间格式化

m0_62823653的博客

06-04

1490

在vue3中没有了 过滤器，想要实现时间格式化，就需要我们另辟蹊径，所以我尝试了用计算属性代替它去格式化时间。第一步：网上查找能格式化时间的代码第二步：在页面按需导入第三步：在作用域插槽中的使用......

Vue使用computed计算属性，代替filters过滤器

weixin_53641562的博客

07-18

512

Vue使用computed计算属性，代替filters过滤器

vue3 使用计算属性代替 filter 过滤器实现时间格式化操作

qq_42386231的博客

09-02

2672

由于vue3没有了 filter 过滤器，所以我尝试了用计算属性代替它去格式化时间方法如下： 1、在页面按需引用 import formatDate from '../assets/js/FormatDate' // computed 与setup同级 computed: { formatDate() { return formatDate; }, }, 2、在页面使用 formatDate('2021.3.6', "hh:mm dd/MM/yyyy") ps: 以下为完

vue3使用计算属性代替过滤器，实现对显示文字字数的限制

可达鸭的博客

07-28

816

template <template> <div> <span :title="item.name">{{sliceStr('无论多少字只显示5个字',5)}}</span> </div> </template> script import {computed} from "vue" export default { setup(props,context){ cons.

Vue3不支持Filters过滤器的问题

10-14

vue03计算属性过滤器watch

weixin_49239088的博客

06-24

399

计算属性 我们有时候会在模板中绑定表达式来做简单的数据处理，但是如果表达式太长，就会变得臃肿难以维护。比如以下代码 <div> {{text.split(',').reverse().join(',')}} </div> 表达式里面包含了3个操作，并不是很清晰，有时候可能会更加复杂，所以在遇到复杂的逻辑时，我们应该使用计算属性。上例可以用计算属性进行改写： <div id="app"> {{reverseText}} </div> <

vue2过滤器模糊查询方法

10-18

总结来说，Vue2过滤器模糊查询方法是通过计算属性和JavaScript的`filter`及`some`方法实现的，它可以动态地根据用户输入的关键词筛选数据，提供实时的搜索体验。这种方法对于构建具有搜索功能的数据驱动的Web应用...

【vue3】vue3中如何替换vue2的filter

我的开源项目:https://gitee.com/derekgo/vue-cms_xg

01-22

1834

解决流程使用vue3的计算属性替换vue2的filter vue2 template部分 {{变量 | filterData}} script部分 filters:{ filterData(val){ return val?val:'空' } } vue3 <template> <div> {{filterData(h1)}} </div> </template> <script> import { def

Vue3中代替filters过滤器三种方案

热门推荐

xybhua的博客

02-07

1万+

不建议把过滤器功能做的很复杂，这违背了过滤器的设计初衷,比如：Vue.filter(‘format’, function (value, …params) {…过滤器函数总是接收表达式的值作为第一个参数，过滤器本质上是一个 JS 函数，自然可以接收多个参数。v-bind 表达式：v-bind:href=“变量 | 过滤器”双花括号：{{ 变量 | 过滤器 }}实例：为表达式的值添加前后缀的过滤器。首字母转换为大写字母的全局过滤器。过滤器本质上是一个函数，与。

vue3.0 过滤器

weixin_49792375的博客

09-09

496

vue3 添加全局过滤器

【Vue3系列】vue3过滤器功能

Write less，do more

01-07

1731

1. computed computed: { computedStatus() { // 计算属性要return一个函数接收参数 return function (state) { switch (state) { case 1: return '待支付'; break; case 2: return '

3.vue过滤器

qq_26144233的博客

01-19

297

过滤器概念 Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：mustache 插值和 v-bind 表达式 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示 过滤器中的 function，第一个参数是管道符前面传递过来的数据 过滤器调用时候的格式： {{value| 过滤器的名称}} 全局过滤器 Vue.filter(‘过滤器的名称’，f...

Vue(三)——过滤器

黎小小的博客

01-21

446

一、注册过滤器 过滤器是一个使用在双大括号插值和 v-bind 中，用于过滤输出内容的函数假设有一个用于把内容转为大写的过滤器函数 toUpperCase {{content|toUpperCase}} | : 管道符，表示数据从左至右通过管道符进行传递 过滤器可以有多个，执行顺序从左至右，过滤器函数第一个参数的值就是其管道符前一个的结果 1.1全局过滤器 Vue.filter('过滤器名称', 过滤器函数); 1.2局部过滤器 Vue.component('组件', { .

Vue解析三之过滤器

xiaozhen0610的博客

06-16

152

export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), .

vue3中filterBy过滤器

04-04

在Vue3中，filterBy过滤器已经被移除了。取而代之的是使用computed属性来进行过滤。在模板中，你可以使用v-for指令来迭代数据，并使用computed属性来对数据进行过滤。例如： ``` <template> <div> <input v-model="search" /> <ul> <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> import { ref, computed } from 'vue'; export default { setup() { const items = ref([ { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Cherry' }, { id: 4, name: 'Durian' }, ]); const search = ref(''); const filteredItems = computed(() => { return items.value.filter(item => { return item.name.toLowerCase().includes(search.value.toLowerCase()); }); }); return { items, search, filteredItems, }; }, }; </script> ``` 在这个例子中，我们使用ref来创建items和search变量。然后，我们使用computed属性来创建filteredItems，它会根据search的值来过滤items。最后，我们在模板中使用v-for指令来迭代filteredItems。