html使用elementui案例

news2024/11/25 15:29:11

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="static/css/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="static/js/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="static/js/index.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-button type="primary" @click="openIframe('index.html')">主页</el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light">
                    <el-button type="primary" @click="openIframe('search.html')">聚合搜索</el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-button type="primary" @click="openIframe('login.html')">登录</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="18">
                <div class="grid-content bg-purple">
                    <!-- 主体内容 -->
                    <iframe :src="iframeSrc" width="100%" height="600px"></iframe>
                </div>
            </el-col>
        </el-row>

    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    iframeSrc: 'index.html'
                }
            },
            methods: {
                openIframe(url) {
                    this.iframeSrc = url;
                }
            }

        })
    </script>

</body>
<style>
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>

</html>

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

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

相关文章

轻松将Win10系统备份到U盘的2种方法！

轻松将Win10系统备份到U盘的2种方法！

问题&#xff1a;我能将Win10系统备份到U盘吗&#xff1f; ​“我想将Win10系统备份到U盘&#xff0c;然后通过增量或差异备份定期备份。我使用了系统自带的工具进行备份&#xff0c;但它无法识别这个U盘。有没有好用的方法可以轻松的将电脑系统备份到u盘/移动硬盘&#xf…
阅读更多...
Ubuntu系统下Nginx安装

Ubuntu系统下Nginx安装

一、使用apt安装nginx 0-如果本机安装了nginx&#xff0c;就进行卸载&#xff1a; apt-get --purge autoremove nginx 检查本机是否还有nginx程序在后台运行&#xff0c;如果有直接kill掉。 ps -ef | grep nginx 1-默认版本安装 apt-get update apt-get install nginx 2…
阅读更多...
【备战秋招】每日一题:3月18日美团春招第四题:题面+题目思路 + C++/python/js/Go/java带注释

【备战秋招】每日一题:3月18日美团春招第四题:题面+题目思路 + C++/python/js/Go/java带注释

2023大厂笔试模拟练习网站&#xff08;含题解&#xff09; www.codefun2000.com 最近我们一直在将收集到的各种大厂笔试的解题思路还原成题目并制作数据&#xff0c;挂载到我们的OJ上&#xff0c;供大家学习交流&#xff0c;体会笔试难度。现已录入200道互联网大厂模拟练习题&…
阅读更多...
spring Security 认证失败，用户名和密码是正确的还是失败

spring Security 认证失败，用户名和密码是正确的还是失败

项目用登录输入正确的用户名和密码为什么还是告知，用户名和密码是不正确？ 有这几种情况 第一种是不是开启缓存，数据库中存储的是加密后的密码 第二种，查看源代码，这句是关键，presentedPassword是明文密码，userDetails.getPassword()是加密后的密码，进行比较 this.pa…
阅读更多...
做好个人黄金投资，学习黄金投资交易原则

做好个人黄金投资，学习黄金投资交易原则

随着经济的发展,黄金逐渐成为金融投资的重要工具&#xff0c;越来越多的人开始关注黄金投资。想要做好个人黄金投资&#xff0c;建议先熟悉和学习黄金投资交易原则的内容。 黄金投资交易原则一、跟随趋势入场 在买入之前&#xff0c;首先应对行情的运行趋势有个明确的判断。一…
阅读更多...
全网最全postman接口测试教程和项目实战~从入门到精通！！！

全网最全postman接口测试教程和项目实战~从入门到精通！！！

Postman实现接口测试内容大纲一览&#xff1a; 一、什么是接口&#xff1f;为什么需要接口&#xff1f; 接口指的是实体或者软件提供给外界的一种服务。 因为接口能使我们的实体或者软件的内部数据能够被外部进行修改。从而使得内部和外部实现数据交互。所以需要接口。 比如&…
阅读更多...
支撑企业未来10年高增长，用友资金管理平台助力新零售企业逆境破局

支撑企业未来10年高增长，用友资金管理平台助力新零售企业逆境破局

随着大数据、云服务、5G等技术的深化发展&#xff0c;人们消费观念及需求逐渐变化&#xff0c;我国新零售业数字化进程不断加快。近年来&#xff0c;新零售已经不仅局限于单一的零售范畴&#xff0c;逐步演变为集零售、快递物流、金融科技、企业服务、人工智能等各行各业为一体…
阅读更多...
公司只有1个测试，领导却让我测试10个项目，这不是为难我....

公司只有1个测试，领导却让我测试10个项目，这不是为难我....

读者提问&#xff1a;公司只有 1个测试&#xff0c;领导让我同时测试 10个项目&#xff0c;我该怎么办&#xff1f;回答&#xff1a;如果我是那个测试&#xff0c;我会做这三件事 1、向上申请资源2、任务分配到人3、执行测试任务 一、向上申请资源 1个测试同时对接 10个项目&a…
阅读更多...
华为云认证的含金量高吗？数通考什么内容？

华为云认证的含金量高吗？数通考什么内容？

对于从事信息通信行业的人来说&#xff0c;拥有一份专业的证书&#xff0c;对提升自己的技能、职业竞争力是非常有帮助的&#xff0c;而华为云虽然是一个新兴的云计算厂商&#xff0c;但是咋断电几年之内&#xff0c;已经发展到了国内第二的位置&#xff0c;而且还在不断地发展…
阅读更多...
java序列化和文件的输入和输出

java序列化和文件的输入和输出

文章目录 一、JAVA的序列化1. 简介2. 对象序列化的步骤3. 小结4. 序列化4. 解序列化 二、对象的序列化1. 简介2. Java.io.File.class3. 缓冲区 三、序列化版本控制 一、JAVA的序列化 1. 简介 如何将我们的java对象存储起来&#xff0c;这里介绍两种思路&#xff1a; 如果我们…
阅读更多...
【JavaEE进阶】——第八节.SpringBoot统一功能处理

【JavaEE进阶】——第八节.SpringBoot统一功能处理

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;JavaEE进阶 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01; 文章目录 前…
阅读更多...
智能公厕引导系统为未来共享公厕发展新趋势打造基础

智能公厕引导系统为未来共享公厕发展新趋势打造基础

智慧公厕管理系统可以提高公厕的服务质量和管理效率&#xff0c;实现公厕的自动化管理和数据分析。该系统可以广泛应用于各类公共场所&#xff0c;如商场、公园、机场、医院等。 一、智慧公厕引导系统案例展示 智慧公厕管理系统还可以实现公厕的人口统计和安全监控等功能。服务…
阅读更多...
【今天聊聊AI】AI歌手会取代流行歌手吗

【今天聊聊AI】AI歌手会取代流行歌手吗

一、聊聊AI歌手发展现状 近日&#xff0c;“AI孙燕姿”火遍全网&#xff0c;AI孙燕姿翻唱林俊杰的《她说》、周董的《爱在西元前》、赵雷的《成都》等等歌曲让网友听了直呼&#xff1a;“听了一晚上&#xff0c;出不去了。” 现在AI歌手技术到底已经发展到了怎样的地步&#xf…
阅读更多...
MySQL千万级数据优化方案

MySQL千万级数据优化方案

简介 ↓↓↓处理千万级数据的MySQL数据库&#xff0c;可以采取以下优化措施↓↓↓ 使用索引&#xff1a;确保对经常用于查询和排序的字段添加索引。不要在查询中使用SELECT *&#xff0c;而是明确指定需要的字段。分区表&#xff1a;如果表中的数据按照时间或其他维度进行划分&…
阅读更多...
26岁机电专业，零基础转行学云计算，求推荐靠谱机构！

26岁机电专业，零基础转行学云计算，求推荐靠谱机构！

26岁机电专业&#xff0c;零基础转行学云计算&#xff0c;求推荐靠谱机构&#xff01; 关于26岁零基础转行云计算&#xff0c;求机构推荐这类问题。建议可以先把自己的具体需求整理清楚&#xff0c;例如自身的学习能力情况、需要学习的专业的技术内容、你想要通过培训学习达到什…
阅读更多...
承接vue2-＞vue3的一些变动

承接vue2-＞vue3的一些变动

1.Vue3简介 2020年9月18日&#xff0c;Vue.js发布3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;海贼王&#xff09;耗时2年多、2600次提交、30个RFC、600次PR、99位贡献者github上的tags地址&#xff1a;https://github.com/vuejs/vue-next/releases/tag/v3.0.0 …
阅读更多...
NetApp FAS 混合闪存阵列协助您建构简单易用、聪明智慧、值得信赖的储存基础架构

NetApp FAS 混合闪存阵列协助您建构简单易用、聪明智慧、值得信赖的储存基础架构

NetApp FAS 混合闪存阵列 主要优势 1、简单易用&#xff1a;节省您宝贵的时间、金钱和人力 •几分钟内完成储存资源配置。 •以获证实的效率技术降低成本。 •可在单一系统上管理档案与区块资料。 2、聪明智慧&#xff1a;灵活因应瞬息万变的业务需求 •以不中断营运的方式扩…
阅读更多...
javascript中的错误类型

javascript中的错误类型

javascript 中的错误类型&#xff1a; SyntaxErrorTypeErrorReferenceErrorRangeErrorURLErrorError SyntaxError 语法错误 // 当您在编写一个函数时忘记了括号 ,)来括起您的代码&#xff0c;您将收到一个SyntaxError错误 function say(text) {return text; }say(shark;// …
阅读更多...
[论文阅读72]Parameter-Efficient Transfer Learning for NLP

[论文阅读72]Parameter-Efficient Transfer Learning for NLP

1. 基本信息 题目论文作者与单位来源年份Parameter-Efficient Transfer Learning for NLPNeil Houlsby等Google Research&#xff0c;雅盖隆大学-波兰PMLR2019 Houlsby N, Giurgiu A, Jastrzebski S, et al. Parameter-efficient transfer learning for NLP[C]//Internationa…
阅读更多...
代码随想录训练营Day49| 121. 买卖股票的最佳时机 122.买卖股票的最佳时机II

代码随想录训练营Day49| 121. 买卖股票的最佳时机 122.买卖股票的最佳时机II

目录 学习目标 学习内容 121. 买卖股票的最佳时机 122.买卖股票的最佳时机II 学习目标 121. 买卖股票的最佳时机 122.买卖股票的最佳时机II 学习内容 121. 买卖股票的最佳时机 121. 买卖股票的最佳时机 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/prob…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023