vue3添加收藏网站页面

 结构与样式

<template><div class="web_view"><ul><li v-for="web in webList" :key="web.title"><a :href="web.src" :title="web.title" target="_blank"><img :src="web.img" alt="未找到图标" /><p v-html="web.title"></p></a></li></ul></div>
</template>
<script setup name="WebView">
import myweb from '../stores/web'
const { webList } = myweb()
</script>
<style scoped>
.web_view {display: flex;align-items: center;justify-content: center;height: 100%;ul {display: flex;li {text-align: center;img {width: 50px;height: 50px;}&:hover {margin: 30px;}}}
}
</style>

脚本 

 

import { reactive } from 'vue'
export default function () {const webList = reactive([{title: '百度',src: 'https://www.baidu.com',img: '//www.baidu.com/favicon.ico'},{title: '哔哩哔哩',src: '//www.bilibili.com',img: '//www.bilibili.com/favicon.ico'},{title: '智能翻译',src: 'https://fanyi.baidu.com',img: '//fanyi.baidu.com/favicon.ico'},{title: '菜鸟教程',src: 'https://www.runoob.com/',img: 'https://www.runoob.com/favicon.ico'},{title: '在线制作ico图标',src: 'https://www.bitbug.net',img: '//www.bitbug.net/favicon.ico'},{title: '在线运行代码工具',src: 'https://jsrun.net/',img: 'chrome-search://ntpicon/?size=48@1.500000x&url=https://jsrun.net/'},{title: '原神大地图',src: 'https://act.mihoyo.com/ys/app/interactive-map/index.html?bbs_presentation_style=no_header&lang=zh-cn&utm_source=bbs&utm_medium=mys&utm_campaign=pcicon&_markerFps=24#/map/2?shown_types=NaN,-1084,508,2&center=2008.50,-1084.00&zoom=-3.00',img: './assets/img/ico/原神大地图.ico'}// {//   title: '必应翻译',//   src: 'https://cn.bing.com/translator',//   img: 'https://cn.bing.com/favicon.ico'// },])return { webList }
}

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

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

相关文章

微信小程序基础 -- 小程序UI组件(5)

小程序UI组件 1.小程序UI组件概述 开发文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html 什么是组件&#xff1a; 组件是视图层的基本组成单元。 组件自带一些功能与微信风格一致的样式。 一个组件通常包括 开始标签 和 结…

Cyber Weekly #8

赛博新闻 1、微软召开年度发布会Microsoft Build 2024 本周&#xff08;5.22&#xff09;微软召开了年度发布会&#xff0c;Microsoft Build 2024&#xff0c;发布了包括大杀器 Copilot Studio 在内的 50 项更新。主要包括&#xff1a; 硬件层面&#xff1a;与英伟达 & A…

3D牙科网格分割使用基于语义的特征学习与图变换器

文章目录 3D Dental Mesh Segmentation Using Semantics-Based Feature Learning with Graph-Transformer摘要方法实验结果 3D Dental Mesh Segmentation Using Semantics-Based Feature Learning with Graph-Transformer 摘要 本文提出了一种新颖的基于语义的牙科网格分割方…

民国漫画杂志《时代漫画》第16期.PDF

时代漫画16.PDF: https://url03.ctfile.com/f/1779803-1248612470-6a05f0?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps:资源来源网络&#xff01;

代码随想录训练营总结

历经60天的训练营终于结束啦&#xff0c;感觉自己两个月前做的这个决定非常正确&#xff0c;非常感谢卡哥和卡哥助手&#xff0c;从一个代码没有系统刷题没有体系的小白到现在已经有了一些基础&#xff0c;也具备一些刷题的习惯和手感&#xff0c;如果是我自己没有规划的刷可能…

【C++】二分查找:在排序数组中查找元素的第一个和最后一个位置

1.题目 难点&#xff1a;要求时间复杂度度为O(logn)。 2.算法思路 需要找到左边界和右边界就可以解决问题。 题目中的数组具有“二段性”&#xff0c;所以可以通过二分查找的思想进行解题。 代码&#xff1a; class Solution { public:vector<int> searchRange(vect…

Camunda BPM主要组件

Camunda BPM是使用java开发的,核心流程引擎运行在JVM里,纯java库,不依赖其他库或者底层操作系统。可以完美地与其他java框架融合,比如Spring。除了核心流程引擎外,还提供了一系列的管理,操作和监控工具。 1,工作流引擎 既适用于服务或者微服务编排,也适用于人工任务管…

Leetcode42题:接雨水

1.题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,…

hadoop节点添加与删除测试

hadoop节点上下线 docker run -d --name hd1 -p 8888:8888 -p 2222:22 centos:basic init docker run -d --name hd2 -p 8889:8889 centos:basic init docker run -d --name hd3 centos:basic init# hosts echo "172.17.0.2 hadoop1 172.17.0.3 hadoop2 172.17.0.4 hadoo…

网络协议:CSMA/CD 和 CSMA/CA

当多台设备共享同一通信信道时&#xff0c;避免数据传输冲突至关重要。本文将探讨两种广泛使用的协议&#xff1a;CSMA/CD&#xff08;Carrier Sense Multiple Access with Collision Detection&#xff09;和CSMA/CA&#xff08;Carrier Sense Multiple Access with Collision…

【C语言】二叉树的实现

文章目录 前言⭐一、二叉树的定义&#x1f6b2;二、创建二叉树&#x1f3a1;三、二叉树的销毁&#x1f389;四、遍历二叉树1. 前序遍历2. 中序遍历3. 后序遍历4. 层序遍历 &#x1f332;五、二叉树的计算1. 计算二叉树结点个数2. 计算二叉树叶子结点的个数3. 计算二叉树的深度4…

一、Elasticsearch介绍与部署

目录 一、什么是Elasticsearch 二、安装Elasticsearch 三、配置es 四、启动es 1、下载安装elasticsearch的插件head 2、在浏览器&#xff0c;加载扩展程序 3、运行扩展程序 4、输入es地址就可以了 五、Elasticsearch 创建、查看、删除索引、创建、查看、修改、删除文档…

【MySQL】——并发控制

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…

计算机毕业设计 | springboot+vue房屋租赁管理系统(附源码)

1&#xff0c;绪论 1.1 课题来源 随着社会的不断发展以及大家生活水平的提高&#xff0c;越来越多的年轻人选择在大城市发展。在大城市发展就意味着要在外面有一处安身的地方。在租房的过程中&#xff0c;大家也面临着各种各样的问题&#xff0c;比如需要费时费力去现场看房&…

oj项目后端分析

1.菜单管理 我们菜单管理有菜单表(sys_menu)&#xff0c;还有用户角色表&#xff08;sys_role&#xff09;&#xff0c;菜单表是用于管理我们用户所拥有的权限&#xff0c;不同的用户所看到的页面是不一样的&#xff0c;由于一些用户他能够看到题库管理和考题管理&#xff0c;还…

Anaconda Anaconda支持什么编程语言的环境配置

Anaconda是一个数据科学和机器学习的开发环境&#xff0c;它支持多种编程语言的环境配置&#xff0c;包括&#xff1a; Python&#xff1a;Anaconda默认安装了Python和必需的Python库&#xff0c;可以方便地进行Python编程和数据分析。 R&#xff1a;Anaconda也可以配置R语言环…

Aws EC2 + Aws Cli + Terraform

1 什么是 Terraform&#xff1f; Terraform 是由 HashiCorp 创建的“基础架构即代码”(Infrastructure-as-Code&#xff0c;IaC)开源工具。Terraform 的配置语言是 HashiCorp Configuration Language&#xff08;HCL&#xff09;&#xff0c;用来替代更加冗长的 JSON 和 XML 等…

SpringBoot注解--09--idea创建spring boot项目,java版本只能选择17和21

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 idea创建spring boot项目1.问题描述2.原因3.解决方法方案一&#xff1a;升级JDK版本至17或更高方案二&#xff1a;替换Spring初始化的源https://start.aliyun.com i…

实时计算及异构计算随笔笔记

3、异构计算的典型应用 异构计算并不神秘&#xff0c;目前已渗透各个领域&#xff0c;不仅是PC领域&#xff0c;也包括了手持移动设备领域、行业领域&#xff0c;甚至是云计算、分布式计算领域。事实上&#xff0c;异构计算至少在应用端&#xff08;前台&#xff09;并不像它的…

Android 运行时权限

Android 6.0 及以后&#xff0c;如果你的应用需要用到一些危险权限&#xff0c;那么这些权限必须手动申请。 具体危险权限有哪些&#xff0c;可以通过下面这篇文章自行查询到&#xff1a; 使用 adb 命令列出设备所有危险权限 例如&#xff0c;读写文件就涉及到两个危险权限&am…