vue2之过滤器

news2025/1/15 21:00:21

过滤器

过滤器的实现类似Django的过滤器。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="http://js.yeyese.top/vue/vue.js"></script>

</head>
<body>

    <div id="app">
        <p>
            价格: <input type="text" v-model="price">
            数量: <input type="text" v-model="quantity">
        </p>

        <p>
            总价: {{ price | totalPrice(quantity,'¥')}}
        </p>
    </div>
    
</body>

<script>
    Vue.filter('totalPrice',function(value,quantity,prefix){
        if ( !value) return "";
            value = parseInt(value);
          return   (value* quantity).toString()+ prefix;
    })

    var vm = new Vue({
        el: '#app',
        data: {
            price: 0,
            quantity: 0

        }
    })


</script>

</html>

效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1519373.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

c++入门你需要知道的知识点(上)

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 今日主菜&#xff1a;c入门 主厨&#xff1a;邪王真眼 所属专栏&#xff1a;c专栏 主厨的主页&#xff1a;Chef‘s blog 前言&#xff1a; 咱也是好久没有更…

reids设计与实现(一)——数据结构

文章目录 1. 前言2. redis 动态字符串2.1. 字符串的数据结构&#xff1a;2.2. 剖析&#xff0c;length&#xff1b;2.3. 剖析&#xff0c;free&#xff1b;2.3. 使用c字符串函数&#xff1b; 3. redis 链表4. 字典5. 跳跃表6. 整数set&#xff08;intset&#xff09;6.1. 升级&…

【C++ 】list 类

1. 标准库中的list类 list 类 的介绍&#xff1a; 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代 2. list与forward_list非常相似&#xff1a;最主要的不同在于forward_list是单链表 3. 与其他的序列式容器相比(a…

汇编语言(Assemble Language)学习笔记(更新中)

零.学习介绍和使用工具 【1】我们使用的教材是机械工业出版社的《32位汇编语言程序设计第二版》。 指导老师是福州大学的倪一涛老师。 这门课程教授的是Intel 80*86系列处理器的32位汇编。我们现在的处理器都兼容这个处理器。 这篇博客只是大二下汇编语言学习的总结&#xff…

城乡居民基本医疗信息管理系统|基于Springboot的城乡居民基本医疗信息管理系统设计与实现(源码+数据库+文档)

城乡居民基本医疗信息管理系统目录 目录 基于Springboot的城乡居民基本医疗信息管理系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1、病例管理 2、医院资讯信息管理 3、医院资讯类型管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选…

第十四次CCF-CSP(第二题 买菜、第四题 再卖菜)

第十四次CCF-CSP 第二题 买菜 原题链接&#xff1a;3263. 买菜 - AcWing题库 思路分析 简单来说&#xff0c;就是给出两组区间的集合A,B 求出两集合中相交区间的部分的长度&#xff0c;注意若区间 [s,t] 是相交的&#xff0c;则长度为 t-s 。 思路一 因为数据量比较小&am…

传输层的UDP协议

1. UDP协议报文格式 1.1 16位端口号 UDP协议报文中&#xff0c;端口号占2个字节&#xff0c;包括 源端口号 和 目的端口号。 1.2 16位UDP长度 UDP报文长度为2个字节 &#xff0c;即UDP数据报长度为0~65535&#xff0c;也就是64kb。 1.3 16位UDP检验和 数据在网络传输的…

Opencv4.5读取视频文件失败的原因

0. 写在前面 这篇短文是对上期编译的一个补充&#xff1a;Windows11OpenCV4.5Qt5.9.1安装教程_opencv4.5.4 windows11安装-CSDN博客 1. 问题现象 上篇博文是读取图片数据成功&#xff0c;结果今天做项目&#xff0c;测试视频文件和录像时&#xff0c;发现capture.isOpened()返…

ROS2组件component自定义实现

ROS2系列文章目录 ROS2中nav_msgs/msg/Path 数据含义及使用 ROS2中std_msgs/msg/Header 数据含义及使用 ROS中TF变换详解 ROS2中launch编写及参数含义&#xff08;launch.xml、python&#xff09; 提示&#xff1a;阅读并实践本文档后&#xff0c;将掌握并理解ros1中nodele…

Python面向对象析构函数你学会了吗?

​ 当我第一次接触Python面向对象编程时&#xff0c;我完全被析构函数的概念给搞懵了。但是&#xff0c;随着我深入研究&#xff0c;我发现它其实并没有那么复杂。 1.析构函数是什么 析构函数是Python面向对象编程中的一个重要概念&#xff0c;它是在对象生命周期结束时自动调…

网工内推 | 浪潮原厂售前、方案经理,上市公司大平台,最高20K

01 浪潮集团 招聘岗位&#xff1a;售前经理 职责描述&#xff1a; 1、负责数字生态、数字教育、工业互联网、数字乡村、智慧城市、智慧交通等数字经济领域解决方案的售前工作&#xff0c;包括但不限于融合方案编制、项目调研、订制文档输出及客户咨询支持。 2、负责与公司各产…

数据完整性

Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 数据完整性 数据完整性是关系数据库的一个重要特征&#xff0c;一般包含实体完整性、参照完整性和用户自定义完整性 3 种 实体完整性 实体完整性&#xff1a;规定表中的每…

VXLAN学习笔记

声明&#xff1a;该博客内容大部分参考参考链接整理 什么是VXLAN&#xff1f; VXLAN(Virtual Extensible LAN)即虚拟扩展局域网&#xff0c;是大二层网络中广泛使用的网络虚拟化技术。在源网络设备与目的网络设备之间建立一条逻辑VXLAN隧道&#xff0c;采用MAC in UDP的封装方…

Python的asyncio 多线程

-- 多线程、进程、协程是什么就不讲了&#xff0c;&#xff08;就是你理解的一边呼吸&#xff0c;一边看文章&#xff09; 仅解决问题的话&#xff0c;下边两篇不用看&#xff0c; Python 中的 async await 概念-CSDN博客 再深一点的看这个 Python中的多线程、进程、协程、…

Vue.js+SpringBoot开发个人健康管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 健康档案模块2.2 体检档案模块2.3 健康咨询模块 三、系统展示四、核心代码4.1 查询健康档案4.2 新增健康档案4.3 查询体检档案4.4 新增体检档案4.5 新增健康咨询 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpri…

【项目设计】基于Httplib和Mysql的视频播放

项目源码&#xff08;绝对可以直接运行&#xff09; 一、项目介绍 1. 对视频播放系统的认识 搭建视频共享播放服务器&#xff0c;可以让所有人通过浏览器访问服务器&#xff0c;实现视频的上传查看&#xff0c;以及管理并播放的功能。主要是完成服务器端的程序业务功能的实现…

腾讯云轻量4核8G12M服务器性能如何?价格感人

腾讯云轻量4核8G12M服务器配置446元一年&#xff0c;646元12个月&#xff0c;腾讯云轻量应用服务器具有100%CPU性能&#xff0c;系统盘为180GB SSD盘&#xff0c;12M带宽下载速度1536KB/秒&#xff0c;月流量2000GB&#xff0c;折合每天66.6GB流量&#xff0c;超出月流量包的流…

springboot276基于JS的个人云盘管理系统的设计与实现

个人云盘管理系统设计与实现 摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装个人云盘管理系统软件来发挥其…

开发反应式API

开发反应式API 开发反应式API1 使用SpringWebFlux1.1 Spring WebFlux 简介1.2 编写反应式控制器 2 定义函数式请求处理器3 测试反应式控制器3.1 测试 GET 请求3.2 测试 POST 请求3.3 使用实时服务器进行测试 4 反应式消费RESTAPI4.1 获取资源4.2 发送资源4.3 删除资源4.4 处理错…

大话设计模式——7.抽象工厂模式(Abstract Factory Pattern)

1.介绍 抽象工厂模式是工厂模式的进一步优化&#xff0c;提供一个创建一系列相关或相互依赖对象的接口&#xff0c;而无需指定它们具体的类。属于创建型模式。 UML图&#xff1a; 2.示例 车辆制造工厂&#xff0c;不仅可以制造轿车也可以用来生产自行车。 1&#xff09;Abs…