Vue项目实战之一----实现分类弹框效果
效果图
实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><style>.as {width: auto;margin-left: 20px;height: auto;}.ass {width: auto;margin-left: 20px;height: auto;margin-top: 20px;}.cass {width: auto;margin-left: 20px;height: auto;margin-top: 20px;}</style></head>
<body><div id="app"><el-button round @click="drawer = true" typer="primary" style="margin-left: 16px">点击选择需要的东西</el-button><el-drawertitle="请选择商品分类":visible.sync="drawer":direction="direction":before-close="handleClose"><div class="as"><el-button round v-for="(item,index) in tableDate" style="margin-bottom: 20px;margin-left: 10px"@click="xian(item)">{{item.name}}</el-button></div><div v-show="hiddens" class="ass"><hr/><el-button round v-for="(ss,index) in childrens" style="margin-bottom: 20px;margin-left: 10px"@click="san(ss)">{{ss.na}}</el-button></div><div v-show="hiddenes" class="ass"><hr/><el-button round v-for="(san,index) in sanChildrens" style="margin-bottom: 20px;margin-left: 10px">{{san.yu}}</el-button></div><div class="cass"><el-button type="warning" round>取消</el-button><el-button type="success" round style="width: 400px">确认</el-button></div></el-drawer></div></body>
<script>new Vue({el: '#app',data: {childrens: [],sanChildrens:[],hiddens: false,hiddenes: false,drawer: false,direction: 'rtl',tableDate: [{name: '活畜',children: [{na: "生猪"},{na: "羊"},{na: "鸡"},{na: "鸭"},{na: "格子"}]}, {name: "猪肉类",children: [{na: "猪瘦肉",children: [{yu: "猪背"},{yu: "猪脚"},{yu: "猪头"}]},{na: "新鲜猪大腿",children: [{yu: "猪脚"},{yu: "猪脚"},{yu: "猪脚"}]},{na: "新鲜猪尾巴",children: [{yu: "猪头"},{yu: "猪头肉"},{yu: "猪眼"}]}]}, {name: "牛肉类",children: [{na: "西藏黑山耗牛肉"},{na: "日本合牛肉"},{na: "俄罗斯黄牛肉"}]}, {name: "鸡鸭鹅类",children: [{na: "鸡胸肉"},{na: "整只鸡"},{na: "鸭腿"}]}, {name: "羊狗类",children: [{na: "狗头"},{na: "羊头"},{na: "羊大腿"}]}, {name: "水产海鲜类",children: [{na: "鲟鱼"},{na: "鱿鱼"},{na: "多宝鱼"}]}, {name: "蔬菜类",children: [{na: "白菜"},{na: "菠菜"},{na: "卷心菜"}]}, {name: "水果类",children: [{na: "苹果"},{na: "香蕉"},{na: "梨"}]}, {name: "米面粮油",children: [{na: "东北大米"},{na: "缅甸小米"},{na: "东北珍珠米"}]}, {name: "干货调味品",children: [{na: "耗油"},{na: "生抽"},{na: "胡椒盐"}]}, {name: "冷冻冻货",children: [{na: "冷冻猪大腿"},{na: "冷冻瘦肉"},{na: "冷冻猪尾巴"}]}, {name: "农副加工",children: [{na: "面粉"},{na: "面包"},{na: "小麦面包"}]}, {name: "日常用品",children: [{na: "毛巾"},{na: "钢丝球"},{na: "沐浴露"}]}, {name: "酒水饮料",children: [{na: "雪碧"},{na: "可乐"},{na: "啤酒"}]}]},methods: {handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},xian(dd) {this.hiddens = true;this.childrens = dd.children;this.hiddenes=false;},san(item){this.hiddenes = true;this.sanChildrens = item.children;}}})
</script>
</html>相关文章：
Vue项目实战之一----实现分类弹框效果
效果图 实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"js/vue.js"></script><!-- 引入样式 --><link rel"stylesheet&qu…...
Vue解析器
解析器本质上是一个状态机。但我们也曾提到，正则表达式其实也是一个状态机。因此在编写 parser 的时候，利用正则表达式能够让我们少写不少代码。本章我们将更多地利用正则表达式来实现 HTML 解析器。另外，一个完善的 HTML 解析器远比想象的要…...
Spring Cloud 版本升级遇坑记：OpenFeignClient与Gateway的恩怨情仇
Spring Cloud 版本升级遇坑记：OpenFeignClient与Gateway的恩怨情仇 近日，在对项目中的 Spring Boot、Spring Cloud 以及 Spring Cloud Alibaba 进行版本升级时，遭遇了一个令人头疼的问题：Spring Cloud Gateway 在运行时一直卡住&a…...
面试：Docker相关问题
文章目录 请解释一下什么是 Docker，以及它在云环境中的应用请简述Docker和LXC的区别什么是Docker Compose？请简述其作用和使用场景在使用Docker时，如何为容器创建一个可访问的网络当一个Docker容器运行异常时，如何通过Docker命令查…...
移动端浏览器 jquery 获取 pdf blob文件流 预览pdf
最近遇到一个需求，一个古早的移动端 juery 项目要求做一个页面，从接口获取 pdf 文件流，然后预览出来 这里使用第三方工具：pdf.js 代码如下： // 引入相关文件<script src"../js/pdf.js" type"text…...
Redis并发问题解决方案
目录 前言 1.分布式锁 1.基于单个节点 2.基于多个节点 3.watch(乐观锁) 2.原子操作 1.单命令操作 2.Lua 脚本(多命令操作) 3.事务 1.执行步骤 2.错误处理 3.崩溃处理 总结 前言 在多个客户端并发访问Redis的时候，虽然Redis是单线程执行指令ÿ…...
读取两个文件夹里不同名的文件，处理映射不对应的文件
解决方案：读取两个文件夹里不同名的文件，处理映射不对应的文件 # -*- coding: utf-8 -*- import ospath1 r/home/ubuntu/data/yoloData/images/train2017 path2 r/home/ubuntu/data/yoloData/labels/train2017def read_all_file_name():file_path ./t…...
SpringCloud原理-OpenFeign篇（四、请求原理）
文章目录 前言正文一、书接上回，从代理对象入手二、ReflectiveFeign.FeignInvocationHandler#invoke()三、SynchronousMethodHandler#invoke(...) 的实现原理3.1 invoke(...)源码3.2 executeAndDecode(...) 执行请求并解码 四、如何更换client 的实现 附录附1&#…...
什么是工业物联网（IOT）？这样的IOT平台你需要吗？——青创智通
物联网(IOT)是指在互联网上为传输和共享数据而嵌入传感器和软件的互联设备的广泛性网络。这允许将从物理对象收集的信息(数据)存储在专用服务器或云中。通过分析这些积累的信息，通过提供最优的设备控制和方法，可以实现一个更安全、更方便的社会。在智能家…...
MTK Pump Express 快速充电原理分析
1 MTK PE 1.1 原理 在讲正文之前，我们先看一个例子。 对于一块电池，我们假设它的容量是6000mAh，并且标称电压是3.7V，换算成Wh(瓦时)为单位的值是22.3Wh(6000mAh*3.7V)；普通的充电器输出电压电流是5V2A(10W)，…...
leetcode刷题记录——1991. 找到数组的中间位置
找到数组的中间位置 给你一个下标从 0 开始的整数数组 nums ，请你找到 最左边 的中间位置 middleIndex （也就是所有可能中间位置下标最小的一个）。 中间位置 middleIndex 是满足 nums[0] nums[1] … nums[middleIndex-1] nums[middleInd…...
跨域攻击分析和防御（上）
点击星标，即时接收最新推文 跨域攻击 在大型公司或大型跨国企业中都拥有自己的内网，跨国公司都有各个子公司一般以建立域林进行共享资源。根据不同职能区分的部门，从逻辑上以主域和子域进行划分以方便统一管理。在物理层使用防火墙将各个子公…...
GEE：梯度提升树（Gradient Boosting Tree）分类教程（样本制作、特征添加、训练、精度、参数优化、贡献度、统计面积）
作者：CSDN @ _养乐多_ 本文将介绍在Google Earth Engine （GEE）平台上进行梯度提升树（Gradient Boosting Tree）分类的方法和代码，其中包括制作样本点教程（本地、在线和本地在线混合制作样本点，合并样本点等），加入特征变量(各种指数、纹理特征、时间序列特征、物候特征…...
ubuntu22.04 arrch64版在线安装redis
脚本 apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 40976EAF437D05B5 apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3B4FE6ACC0B21F32 echo "deb http://archive.ubuntu.com/ubuntu/ trusty main universe restricted multiverse" >…...
篮桥云课-摆玩具
思维好题 一开始掉进了二分的陷阱，发现看看逐个位置的差，我们要分成k段就是要取消k-1个最大的逐差 然后将剩余的加起来就可以了 因为本体保证是从小到大给出的 这一点保证了答案的正确性，自己没想出来 还是太菜了 #include<bits/stdc.h&…...
【python】python进阶知识点
eval函数用法 函数参数：字符串 # 计算表达式 print(eval("12*3")) # 把字符串当成python程序运行 print(eval("random.random()")) # 字符串转成列表 print(type(eval("[1,2,3,4]"))) # 字符串转成字典 print(type(eval("{name…...
LeetCode算法题解（动态规划）|LeetCode322. 零钱兑换、LeetCode279. 完全平方数
一、LeetCode322. 零钱兑换 题目链接：322. 零钱兑换 题目描述： 给你一个整数数组 coins ，表示不同面额的硬币；以及一个整数 amount ，表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一…...
Python Web开发基础知识篇
一，基础知识篇 本片文章会简单地说一些python开发web中所必须的一些基础知识。主要包括HTML和css基础、JavaScript基础、网络编程基础、MySQL数据库基础、Web框架基础等知识。 1,Web简介 Web，全称为World Wide Web，也就是WWW，万…...
企业计算机服务器中了360勒索病毒怎么办，360勒索病毒解密文件恢复
计算机技术的不断发展，为企业的生产运营提供了极大便利，不仅提升了办公效率，还促进了企业的发展。企业计算机在日常工作中一定加以防护，减少网络威胁事件的产生，确保企业的生产生产运营。最近，网络上的360后…...
LeetCode无重复字符的最长字符串的Java实现
题目 给定一个字符串 s ，请你找出其中不含有重复字符的 最长连续子字符串 的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子字符串是 "abc"，所以其长度为 3。示例 2: 输入: s "bbbbb" 输…...
Dify文档解析配置实战手册：从PDF乱码到结构化知识库，97%用户忽略的4个关键参数设置
第一章：Dify文档解析配置的核心价值与典型痛点Dify 的文档解析配置是构建高质量 RAG（检索增强生成）应用的基石。它决定了原始 PDF、Word、Markdown 等非结构化文档如何被切分、清洗、元数据注入及向量化，直接影响后续检索的准确性…...
从‘差异集’到‘代换’：图解Prolog与类型推断中的‘合一’核心思想
从‘差异集’到‘代换’：图解Prolog与类型推断中的‘合一’核心思想 在计算机科学的抽象丛林里，有些思想像暗河般贯穿多个领域。当Prolog解释器回答"谁杀了罗宾"时，当Haskell编译器推断出map :: (a -> b) -> [a] -> [b]的…...
如何用SQL按条件计算移动求和_结合CASE与窗口函数
能，但CASE必须嵌套在SUM()内；ROWS比RANGE更可控；ORDER BY需唯一或加辅助列；NULL需显式处理为0；索引和窗口范围影响性能。用 SUM() 窗口函数 CASE 实现条件移动求和直接说结论：能，但必须把 CASE…...
边缘计算与生成式AI：Jetson平台实战解析
1. 在边缘设备上实现生成式AI的突破性实践 NVIDIA Jetson平台正在彻底改变生成式AI的应用范式。作为一名长期从事边缘AI开发的工程师，我亲历了从云端依赖到本地化部署的转变过程。Jetson AGX Orin这类边缘设备的出现，让我们能够在终端设备上直接运行Llam…...
告别抓瞎！保姆级教程：在Ubuntu虚拟机里用Qt Creator远程调试i.MX6开发板（附完整配置流程）
嵌入式开发实战：Qt Creator远程调试i.MX6开发板全流程解析 在嵌入式开发领域，调试环节往往是新手工程师的"拦路虎"。当你的代码在开发板上运行异常时，能否快速定位问题直接决定了开发效率。本文将带你深入掌握Qt Creator远程调试i.…...
渗透基础知识ctfshow——Web应用安全与防护（第六 七章）
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录混合型XSSXSS 练习（反射型）**绕过方法**新增知识：平台外带xss编码绕过XSS过滤绕过方法请求伪造漏洞_CSRF绕过方法最简单的SSRFSSR…...
英雄联盟国服皮肤定制终极指南：R3nzSkin技术深度解析与安全实践
英雄联盟国服皮肤定制终极指南：R3nzSkin技术深度解析与安全实践 【免费下载链接】R3nzSkin-For-China-Server Skin changer for League of Legends (LOL) 项目地址: https://gitcode.com/gh_mirrors/r3/R3nzSkin-For-China-Server R3nzSkin国服特供版是专为中…...
浪潮NF5280M6服务器上ESXi 6.7双网卡聚合实战：从交换机LACP到ESXi IP哈希的完整避坑指南
浪潮NF5280M6服务器ESXi 6.7双网卡聚合实战：从交换机配置到主机调优的全链路解析 当两台Intel X710光纤网卡在浪潮NF5280M6服务器机箱里闪烁绿灯时，大多数运维工程师可能不会想到，这个看似标准的硬件组合会在LACP聚合配置中引发持续数小时的网…...
GeoAI通用平台：基于LangChain的智能地理空间AI架构实践
引言 在当今数据驱动的时代，地理空间分析在各个行业中变得越来越重要。然而，传统的GIS工具通常需要专业知识和复杂的工作流程，这对许多用户来说是一个门槛。GeoAI通用平台通过将大语言模型（LLM）与地理空间数据处理相结合，实现了自然语言与地理信息系统的交互，有效解决了…...
Alpha AI 量化 vs 传统量化深度对比测评
在数字经济的演进中，量化技术一直处于鄙视链的顶端。但随着 AI 大模型与 Web3 技术的爆发，传统的量化架构正面临前所未有的挑战。近期备受瞩目的Alpha AI平台，打出了“极简智能”的旗号。它究竟是对传统工具的简单升级，还是一次彻…...