当前位置: 首页 > news >正文

Vue2五、商品分类:My-Tag表头组件,My-Table整个组件

准备:

安包 npm less less-loader。拆分:一共分成两个组件部分:

1:My-Tag 标签一个组件。2:My-Table 整体一个组件(表头不固定,内容不固定(插槽))

一,My-Tag 分类标签的功能:

tip:拆分时style要加:<style lang="less" scoped> </style>

在APP.vue中:导入、注册、使用组件

功能:

1 : input修改数据 和 文字互斥

用 布尔数据  isShow:falseinput加v-if 、div加v-else

<template><div class="my-tag"><inputclass="input"type="text"placeholder="输入标签"v-if="isShow"/><div class="text" v-else>茶具</div></div>
</template>
<script>
// My-Tag 分类标签的功能:
// 1 : input修改数据  和  文字互斥   用   布尔数据  v-if  v-else 
// 2 : 双击文字   div显示input标签→自动获得焦点
// 3 : input要数据回显
// 4 : 用户输入后,回车→把新的内容渲染到页面→数据应该同步
export default {
data(){return{isShow:false}
},
}
</script>

2 :双击显示input+自动获焦和失焦

双击文字 div显示input标签输入框+input输入框自动获得焦点

光标在输入框中失去焦点时:输入框变成div里的文字

dbl=double 

1 div(茶具)添加@dblclick双击   修改isShow:为true

main全局自定义命令获焦指令,在input身上直接用v-focus

3 input添加   @blur失焦  isShow:修改为true,输入框变成div里的文字

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false//自定义命令---获得焦点-----全局-----在main.js
Vue.directive('focus', {inserted(el) {el.focus()}})// ---------------------------------
new Vue({render: h => h(App),
}).$mount('#app')
<template><div class="my-tag"><inputclass="input"type="text"placeholder="输入标签"v-if="isShow"v-focus@blur="isShow=false"/><!--dbl=double  双击-------><div class="text" v-else @dblclick="dblfn" >茶具</div></div>
</template>
<script>
// My-Tag 分类标签的功能:
// 1 : input修改数据  和  文字互斥   用   布尔数据  v-if  v-else 
// 2 : 双击文字   div显示input标签→自动获得焦点
// 3 : input要数据回显
// 4 : 用户输入后,回车→把新的内容渲染到页面→数据应该同步
export default {
data(){return{isShow:false}},
methods:{dblfn(){this.isShow=true}
}
}
</script>

3 : input要数据回显

父传子- 子组件用父组件的数据。父子通信比较繁琐,

所以用v-model双向绑定 化简(V-model=value属性和input事件的缩写)

1 :父APP.vue:假设一个txt="哈哈哈"   字符串数据,

2 :My-Tag挖坑:props:{  value:String  },

3:父APP.vue: 使用v-model       <MyTag v-model="txt"></MyTag>

4:input添加:value="value" 

5  :  div里文字用差值表达式代替{{value}}

4 : 用户输入后回车,新内容渲染到页面

用户输入后,回车→把新的内容渲染到页面→数据应该同步

1:在input里添加回车事件    @keyup.enter="enterfn"

2 :写函数enterfn:通知父组件保存用户输入的数据$emit(事件名,用户输入的数据)-语法糖

                用户输入的值——借助事件对象获取value的值e.target.value

3 :显示div 隐藏输入框 this.isShow=false

二、My-Table  整体一个组件

1:拆组件

把APP.vue的my-table的结构和css样式剪切到My-Table(拆成组件,好处就是能调用多次)

tip:拆分时My-Table的style要加:<style lang="less" scoped> </style>

然后把My-Table在根组件APP.vue导入、注册、使用

tip:把My-Tag的导入注册和使用全部注释(不然会报错,My-Tag被发现但未使用)

2:父传子拿数据(for循环渲染数据)

1 :My-Table挖坑 使用父组件的数据 

2:父组件传数据

3:子组件v-for循环替换数据

3:插槽

拆成组件,能调用多次,但因为调用多次,不可能每次调用的表格都一模一样(结构不固定),

所以用插槽(表头和内容分别用插槽)允许根据需要定制

1: My-Table表头和内容slot插槽,

2 : name命名——表头:name="head",内容:name="con"  在APP.vue表头和内容接收一下数据

3:内容的插槽——用作用域插槽

My-Table作用域的v-for的值(:item="item" :index="index")扔到APP.vue使用

4 : 放开MyTag注释更换MyTag使用时绑定的值

1:把分类标签的My-Tag的引入、注册、使用、的注释放开,

2: 把使用MyTag 组件绑定的v-model的值更换成item.tag

  <MyTag v-model="item.tag"></MyTag>

相关文章:

Vue2五、商品分类:My-Tag表头组件,My-Table整个组件

准备&#xff1a; 安包 npm less less-loader。拆分&#xff1a;一共分成两个组件部分&#xff1a; 1&#xff1a;My-Tag 标签一个组件。2&#xff1a;My-Table 整体一个组件&#xff08;表头不固定&#xff0c;内容不固定&#xff08;插槽&#xff09;&#xff09; 一&…...

梯度下降法求六轴机械臂逆向解

梯度下降法求六轴机械臂逆向解 一、几何基础 对于上述六轴机械臂的数学建模来说&#xff0c;可以构建一个六轴机械臂的运动学正逆解的数学模型&#xff0c;在一个直角坐标系中有如下旋转矩阵&#xff1a; 绕x轴旋转 R x ( θ x ) [ 1 0 0 0 cos ⁡ θ x sin ⁡ θ x 0 − …...

【生成模型之九】Paint by Example: Exemplar-based Image Editing with Diffusion Models

论文:Paint by Example: Exemplar-based Image Editing with Diffusion Models 代码:https://github. com/Fantasy-Studio/Paint-by-Example 为了实现高质量的基于样本的图像编辑,我们引入了四项关键技术,即利用图像先验、强数据-mask增强、内容瓶颈CLIP class token和无…...

集成RabbitMQ+MQ常用操作

文章目录 1.环境搭建1.Docker安装RabbitMQ1.拉取镜像2.安装命令3.开启5672和15672端口4.登录控制台 2.整合Spring AMQP1.sun-common模块下创建新模块2.引入amqp依赖和fastjson 3.新建一个mq-demo的模块1.在sun-frame下创建mq-demo2.然后在mq-demo下创建生产者和消费者子模块3.查…...

PVE虚拟化平台之开启虚拟机IP显示方法

PVE虚拟化平台之开启虚拟机IP显示方法 一、PVE平台介绍1.1 PVE简介1.2 PVE特点1.3 PVE主要使用场景二、检查PVE环境2.1 环境介绍2.2 检查PVE和虚拟机状态三、虚拟机开启Qemu代理四、Linux虚拟机安装Guest-Agent4.1 进入虚拟机VNC控制台4.2 查看虚拟机IP五、Windows虚拟机安装Gu…...

子Shell及Shell嵌套模式

子Shell 概念 Shell子进程&#xff0c;Shell脚本是从上至下&#xff0c;从左至右依次执行每一行的命令及语句的&#xff0c;即执行完一个命令之后再执行下一个。如果在shell脚本中遇到子脚本(即脚本嵌套)&#xff0c;就会先执行子脚本的内容&#xff0c;完成后再返回父脚本继…...

Onedrive精神分裂怎么办(有变更却不同步)

Onedrive有时候会分裂&#xff0c;你在本地删除文件&#xff0c;并没有同步到云端&#xff0c;但是本地却显示同步成功。 比如删掉了一个目录&#xff0c;在本地看已经删掉&#xff0c;onedrive显示已同步&#xff0c;但是别的电脑并不会同步到这个删除操作&#xff0c;在网页版…...

【gym】给定的强化学习环境简介(二)

文章目录 环境介绍一 box2dbipedal_walkercar_dynamicscar_racinglunar_lander 二、 classic_controlacrobotCartPolecontinuous_mountain_carmountain_carpendulum 三、toy_textblackjackcliffwalkingfrozentaxi 四、mujocoAnt&#xff1a;HalfCheetah&#xff1a;Hopper&…...

ctfhub disable_functions关卡

1.CTFHub Bypass disable_function —— LD_PRELOAD 2.CTFHub Bypass disable_function —— ShellShock 3.CTFHub Bypass disable_function —— Apache Mod CGI 4.CTFHub Bypass disable_function —— 攻击PHP-FPM 5.CTFHub Bypass disable_function —— GC UAF 6.CTFHub B…...

SpringAI人工智能开发框架006---SpringAI多模态接口_编程测试springai多模态接口支持

可以看到springai对多模态的支持. 同样去创建一个项目 也是跟之前的项目一样,修改版本1.0.0 这里 然后修改仓库地址,为springai的地址 然后开始写代码...

2025年我国网络安全发展形势展望

展望2025年&#xff0c;我国网络安全产业有望迎来新的快速增长阶段&#xff0c;零信任安全架构将在各行各业加快应用落地&#xff0c;数据安全技术攻关和应用进程加快&#xff0c;关键基础设施安全能力不断提升。同时&#xff0c;也应关注国家级网络对抗风险加剧、网络安全产业…...

【漏洞复现】BIG-IP Next Central Manager OData 注入漏洞(CVE-2024-21793)

🏘️个人主页: 点燃银河尽头的篝火(●’◡’●) 如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦 一、漏洞概述 1.1漏洞简介 漏洞名称:BIG-IP Next Central Manager OData 注入漏洞漏洞编号:CVE-2024-21793漏洞威胁等级:超危影响范围:BIG-IP Next Central Manage…...

GitLab部署到阿里云服务器上

GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的web服务。可通过Web界面进行访问公开的或者私人项目。它拥有与Github类似的功能&#xff0c;能够浏览源代码&#xff0c;管理缺陷和注释。 一、安装 1.创建一…...

VTK知识学习(27)- 图像基本操作(二)

1、图像类型转换 1&#xff09;vtkImageCast 图像数据类型转换在数字图像处理中会频繁用到。一些常用的图像算子(例如梯度算子)在计算时出于精度的考虑&#xff0c;会将结果存储为float或double类型&#xff0c;但在图像显示时&#xff0c;一般要求图像为 unsigned char 类型,…...

MyBatis如何处理延迟加载?

大家好&#xff0c;我是锋哥。今天分享关于【MyBatis如何处理延迟加载&#xff1f;】面试题。希望对大家有帮助&#xff1b; MyBatis如何处理延迟加载&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 MyBatis 支持 延迟加载&#xff08;Lazy Loading&am…...

前端网络之【浏览器跨域问题分析与解决方案】

文章目录 同源策略同源与异源跨域的限制场景解决方案 CORS 请求分类 简单请求预检请求 注意点一 【关于Cookie】注意点二 【关于跨域获取响应头】 JSONP 基本流程 代理服务器 如何选择对应方案 同源策略 **同源策略是一套浏览器的安全策略机制&#xff0c;当一个源的文档和脚…...

LeetCode:3218. 切蛋糕的最小总开销 I(贪心 Java)

目录 3218. 切蛋糕的最小总开销 I 题目描述&#xff1a; 实现代码与解析&#xff1a; 贪心 原理思路&#xff1a; 3218. 切蛋糕的最小总开销 I 题目描述&#xff1a; 有一个 m x n 大小的矩形蛋糕&#xff0c;需要切成 1 x 1 的小块。 给你整数 m &#xff0c;n 和两个数…...

前端下载后端文件流,文件可以下载,但是打不开,显示“文件已损坏”的问题分析与解决方案

目录 场景还原 相关代码开发者工具 - 网络请求记录 问题排查 定位改bug 总结 场景还原 我在前端使用axios接收后端xlsx表格文件流并下载&#xff0c;xlsx文件能够下载成功&#xff0c;但是打开却显示文件无法打开 相关代码 请求API封装:Content–Type以及responseType经核…...

PageRank Web页面分级算法 HNUST【数据分析技术】(2025)

1.理论知识 算法原理PageRank 通过网络浩瀚的超链接关系来确定一个页面的等级。 Google 把从 A 页面到 B 页面的链接解释为A页面给B页面投票&#xff0c; Google 根据投票来源&#xff08;甚至来源的来源&#xff0c; 即链接到A页面的页面&#xff09;和投票目标的等级来决定新…...

数字IC前端学习笔记:脉动阵列的设计方法学(四)

相关阅读 数字IC前端https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 引言 脉动结构&#xff08;也称为脉动阵列&#xff09;表示一种有节奏地计算并通过系统传输数据的处理单元(PEs)网络。这些处理单元有规律地泵入泵出数据以保持规则…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、基础概念 1. 哈希核心思想&#xff1a; 哈希函数的作用&#xff1a;通过此函数建立一个Key与存储位置之间的映射关系。理想目标&#xff1a;实现…...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...