Vue框架学习笔记-7

news2024/12/24 10:12:01

Vue-cli项目中的mixin

Vue-cli 项目中的 mixin 是一种强大的功能,允许你在多个组件之间共享可复用的方法和/或选项。Mixin 本质上是一个对象,它可以包含组件选项中的任意选项,如数据、方法、生命周期钩子等。当组件使用 mixin 时,所有 mixin 选项将被“混入”该组件本身的选项中。
首先定义一个,在根目录下创建一个mixin文件夹,并创建js文件。
在这里插入图片描述
文件中写如下内容,可根据实际情况定义:

// mixin混入:保存公共数据:可以定义多个mixin
// 导出mixin
export const mixin1={
    data(){
        return{
            index:0
        }
    },
    methods:{
        clickli(i){
            this.arr[this.index].state=false;
            this.index=i;
            this.arr[i].state=true;
        }
    }

}

如何使用mixin:

<template>  
  <div>  
    <!-- 组件模板 -->  
  </div>  
</template>  
  
<script>  
// 引入 mixin  
import myMixin from './myMixin';  
  
export default {  
  mixins: [myMixin],  
  // 组件的其它选项...  
}  
</script>

Vue-cli项目中的filter过滤器

在 Vue.js 中,过滤器(filters)是一种在表达式中使用的方式,用于将文本格式化为不同的形式。然而,在 Vue 2.x 中,过滤器主要用于文本插值表达式中,比如 {{ message | capitalize }}。不过,从 Vue 3.x 开始,官方已经移除了对过滤器的支持,官方推荐的做法是使用计算属性(computed properties)或方法(methods)来替代过滤器的功能。

搭建filter文件结构
在这里插入图片描述
其中index.js中,配置在程序中用到的过滤器,如下,分别配置了三个过滤器,分别为:sub,subtime,subnum。

const sub = (value, num = 5) => {
if (value.length >= num) {
    return value.substring(0, num) + "......";
} else {
    return value;
}
}

const subtime = (value) => {
let m = parseInt(value / 1000 / 60);//分
let s = parseInt(value / 1000 % 60);//秒

if (s < 10) {
    s = "0" + s;
}
if (m < 10) {
    m = "0" + m;
}
return m + "分" + s + "秒"
}

const subnum = (value) => {
if (value <= 10000) {
    return value;
}
if (value > 10000 && value <= 100000) {
    return String(value / 10000).substring(0, 3) + "W"
}
if (value > 100000) {
    return "10W+";
}
}

export { sub , subtime,subnum}

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

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

相关文章

浙商证券社招入职人才测评:语言数字逻辑性格北森测评笔试题库高分答案、通关技巧

浙商证券作为一家综合性证券公司&#xff0c;其社会招聘的待遇情况包括但不限于以下几个方面&#xff1a;首先&#xff0c;公司提供具有竞争力的薪酬体系&#xff0c;其中应届生的平均薪资待遇大约在12K-20K之间&#xff0c;并且可能发放20个月的薪资&#xff0c;总包大约在25万…

好书推荐!这本Transformer书红的发紫,浅显易懂掌握大模型NLP技术!(附文档)

在大数据和人工智能时代&#xff0c;机器学习和深度学习已经成为各行各业解决问题的有效方法&#xff0c;自然语言处理&#xff0c;是深度学习的重要应用领域之一。 而自然语言处理这个研究领域在过去20年中发生了翻天覆地的变化&#xff0c;从传统的自然语言处理方法到深度学…

EcoDev Studio 与 gitlab【拉去项目,切换分支,再修改提交】

1 安装git工具 https://blog.csdn.net/mukes/article/details/115693833 2 创建空项目 3 推送gitlab 1、进入本地该项目目录下&#xff0c;右键Git Bash Here打开git命令窗口 2、初始化本地仓库&#xff1a; git init将本地项目的所有文件添加到暂存区&#xff1a; git a…

Django | 从中间件的角度理解跨站请求伪造(Cross-Site Request Forgey)[CSRF攻击]

文章目录 切入点案例测试views.py测试代码templates模板下的html文件配置路由运行服务 出现CSRF报错解决CRSF报错再次运行服务 查看结果 切入点 某些恶意网站上包含链接、表单按钮或者]avaScript,它们会利用登录过的用户在浏览器中的认证信息试图在你的网站上完成某些操作 Gj…

好用的无线可视耳勺推荐:四大超有性价比产品集锦!

在生活中&#xff0c;耳部清洁是我们常常会关注却又容易忽视细节的一项日常护理。传统的挖耳勺比如棉签等等&#xff0c;有着不可视的局限性和操作失误的潜在风险。随着科技发展&#xff0c;无线可视耳勺逐步走进我们的视野&#xff0c;它结合了挖耳功能和内置摄像头&#xff0…

循环结构(四)——循环嵌套

&#x1f680;欢迎互三&#x1f449;&#xff1a;程序猿方梓燚 &#x1f48e;&#x1f48e; &#x1f680;所属专栏&#xff1a;C教程&#x1f48e; &#x1f680;关注博主&#xff0c;后期持续更新系列文章 &#x1f680;如果有错误感谢请大家批评指出&#xff0c;及时修改 &a…

快速符合ISO26262产品认证——动力域L2监控方案精华分享

一、VCU应用层监控方案的ISO26262背景 “软件定义汽车”趋势下&#xff0c;更多汽车软件问题与消费者生命安全密切相关。而汽车行业ISO 26262《道路车辆功能安全》是一个国际安全标准&#xff0c;对安装在量产道路车辆上的电气、电子系统的功能安全进行了约束和规定&#xff0c…

C语言----约瑟夫环

约瑟夫环 实例说明&#xff1a; 本实例使用循环链表实现约瑟夫环。给定一组编号分别是4、7、5、9、3、2、6、1、8。报数初始值由用户输入&#xff0c;这里输入4&#xff0c;如图12.18所示&#xff0c;按照约瑟夫环原理打印输出队列。 实现过程&#xff1a; (1)在 VC6.0中创建…

整合springboot、mybatis-plus、做的电影的增删改查以及使用七牛云做图片的上传

一、建表 1.在数据库testdb库中新建一个movie表 2.表中的字段&#xff1a; mo_idmo_namemo_actormo_salespic_name 二、编写代码 1.第一步添加坐标 <properties><java.version>8</java.version></properties><dependencies><!--springspr…

一文带你快速了解——HAProxy负载均衡

一、HAProxy简介 1.1、什么是Haproxy HAProxy是法国开发者 威利塔罗(Willy Tarreau)在2000年使用C语言开发的一个开源软件是一款具备高并发(万级以上)、高性能的TCP和HTTP负载均衡器支持基于cookie的持久性&#xff0c;自动故障切换&#xff0c;支持正则表达式及web状态统计。…

用「画家流水线」的方式理解Transformer中间层

【导读】 Transformer架构层层堆叠&#xff0c;包含十几亿甚至几十亿个参数&#xff0c;这些层到底是如何工作的&#xff1f;当一个新奇的比喻——「画家流水线」&#xff0c;被用于类比并理解Transformer架构的中间层&#xff0c;情况突然变得明朗起来&#xff0c;并引出了一些…

基于 SpringCloud 分布式架构网上商城

目录 1绪论 4 1.1项目研究的背景 4 1.2开发意义 4 1.3课题研究现状 4 1.4项目研究内容与结构 5 2开发技术介绍 6 2.1Java技术 6 2.2 SpringCloud简介 6 2.3MySQL 介绍 7 2.4MySQL环境配置 7 2.5B/S架构 8 3系统分析 9 3.1可行性分析 9 3.1.1技术可行性 9 3.1.2经济可行性 9 3.…

C语言 ——— 结构体类型的声明、自引用、定义以及初始化

目录 结构体的声明 结构体的自引用 结构体的定义以及初始化 结构体的声明 结构体的概念&#xff1a; 结构体是一些值的集合&#xff0c;这些值称为成员变量&#xff0c;结构的每个成员可以是不同类型的变量 结构体的声明&#xff1a; 结构体声明的关键字&#xff1a;st…

【安卓】Service的基本用法

文章目录 Service简介启动和停止ServiceActivity和Service进行通信 Service简介 新建一个ServiceTest项目&#xff0c;然后右击com.example.servicetest→New→Service→Service。 每个Service中最常用到onCreate()、onStartCommand()和onDestroy()这3个方法其中onCreate()方法…

Tomcat 启动时出现 java.util.zip.ZipException: error in opening zip file

Tomcat启动 java.util.zip.ZipException: error in opening zip file 错误解决 今天做一个Tomcat的Demo时出现了一个小问题&#xff0c;也在网上查询了很多资料&#xff0c;遇到这个问题的人很少&#xff0c;基本上没有遇到过这种情况&#xff0c;在此记录一下。 报错信息 异…

5 C 语言常量的定义和分类、#define 和 const 定义常量的区别

目录 1 什么是常量 2 常量的分类 3 常量的定义 3.1 使用 #define 定义常量 3.1.1 介绍 3.1.2 定义格式 3.1.3 案例演示 3.1.4 执行时机 3.2 const 关键字 3.2.1 介绍 3.2.2 const 定义常量的格式 3.2.3 案例演示 3.2.4 执行时机 3.2.5 注意事项 4 #define 和 co…

Spring事务管理和事务传播机制详解

目录 一.简单理解事务 二.Spring中事务的实现 编程式事务 声明式事务 三.Transactional 详解 ▐ 异常回滚属性 rollbackFor ▐ 事务隔离级别 Isolation ▐ 事务的传播机制 propagation 一.简单理解事务 事务是⼀组操作的集合&#xff0c;是⼀个不可分割的操作。 事务会…

CORS解决前端跨域案例学习

跨域的概念不再解释&#xff0c;直接演示下出现跨域的情况&#xff1a; 前端代码&#xff08;index.html&#xff09;: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" conten…

comfyUI工作流也能变现了,“SD变现宝”把工作流转为小程序,重塑内容创作者的商业之路

前言 在数字化浪潮的推动下&#xff0c;内容创作行业正经历着前所未有的变革。如何在这个充满竞争与机遇的时代中脱颖而出&#xff0c;成为每个创作者必须面对的挑战。 SD变现宝&#xff0c;作为ComfyUI的最新插件&#xff0c;凭借其独特的功能与优势&#xff0c;为创作者们开…

赋能未来制造:三品图文档管理软件在大连船推图文档管理中的深度应用与成效

在信息化浪潮席卷全球的今天&#xff0c;企业的研发管理能力已经成为衡量其核心竞争力的重要标尺。三品软件与大连船用推进器有限公司携手合作&#xff0c;成功实施了EDM图文档协同管理系统项目&#xff0c;为企业在激烈的市场竞争中提供强有力的支持&#xff0c;确保其始终处于…