Vue中的过滤器 Filters

news/2025/1/15 21:49:17/

过滤器 Filters

过滤器一般用于格式化文本内容,通常可以在两个地方使用,主要是模板语法、以及 v-bind 表达式中。例如我想对展示的文本进行一些特殊处理,将金额进行四舍五入后再展示。选项 filters 内可以编写多个自定义过滤器。

用法:变量名或文本 | 过滤器名称

<template><div class="home"><div>{{ price | format }}</div><div :num="price | format">xiaoming</div></div>
</template><script>
export default {data() {return {price: 100.85}},filters: {format: function (num) {if (!num) return ''return Math.round(num)}}
}
</script>

预览效果

在这里插入图片描述

原文链接:菜园前端


http://www.ppmy.cn/news/1115957.html

相关文章

信息化发展48

UML l 、统一建模语言&#xff08; UML &#xff09;是一种定义良好、易于表达、功能强大且普遍适用的建模语言&#xff0c; 它融入了软件工程领域的新思想、新方法和新技术&#xff0c; 它的作用域不限于支持OOA 和OOD &#xff0c; 还支持从需求分析开始的软件开发的全过程。…

windows下flutter的环境安装

Flutter是谷歌出品的移动应用SDK&#xff0c;性能卓越、体验精美、跨平台、HotReload等等这些特点。 Dart是谷歌推出的编程语言。支持即时编译JIT&#xff08;Just In Time&#xff09;、HotReload&#xff08;热加载&#xff09;和事前编译AOT&#xff08;Ahead of Time&…

杭州企业型通配符SSL数字证书

通配符SSL数字证书是众多数字证书产品中比较特殊的一款产品&#xff0c;在互联网安全领域&#xff0c;SSL数字证书是保障网站安全性的一种重要手段。而通配符SSL数字证书&#xff0c;更是其中的一种特殊类型&#xff0c;它允许用户对多个域名进行保护&#xff0c;只需一张证书即…

vue3中el-tree的使用及后端传参

实现效果&#xff1a; 如上图所示&#xff0c;实现el-tree的基本使用&#xff0c;回显及联调。 1.点击弹框弹出样式&#xff0c;node-key是id,与后端字段名对应 <Dialog v-model"menuVisible" title"菜单分配"><el-tree:data"treeData&qu…

【推荐】赴日IT课程 做赴日IT我该学什么?

许多想要做赴日IT的朋友问我说&#xff0c;我都该准备什么&#xff0c;或者我该学些什么才能达到可以做赴日程序员的水平呢&#xff1f;今天我就来跟大家聊一下这个问题。要说做准备&#xff0c;你需要有全日制大专及以上的学历才能获得赴日的资格&#xff0c;如果没有我们就先…

uni-app实现点击复制按钮 复制内容

注意:uni.setClipboardData({})里面的data参数必须是字符串类型这个是大坑 第一种 <view>{{orderId}}</view> //复制的内容 <button click"copy(orderId)">复制</button>copy(value) {uni.setClipboardData({data: value , // 这里是个坑接…

Pytorch实现LSTM预测模型并使用C++相应的ONNX模型推理

Pytorch实现RNN模型 代码 import torch import torch.nn as nnclass LSTM(nn.Module):def __init__(self, input_size, output_size, out_channels, num_layers, device):super(LSTM, self).__init__()self.device deviceself.input_size input_sizeself.hidden_size inpu…

element-table 行的拖拽更改顺序(无需下载sortableJs

样例展示&#xff1a;vueelement 通过阅读element文档我们发现element并不提供拖拽相关的api 本博客通过element提供的行类名 注册函数 实现行与行的拖拽 1.设置el-table 的行样式类名 这里是用的是 function <el-table:data"outputData":row-class-name&qu…