Vue开发实例(10)之Link 文字链接

作者简介

作者名:编程界明世隐
简介:CSDN博客专家,从事软件开发多年,精通Java、JavaScript,博主也是从零开始一步步把学习成长、深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢迎您关注,期待与您一起学习、成长、起飞!

引言

Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手、带你飞!
即使你并非前端开发人员,对前端的开发流程进行一定的了解也是很有必要的,谁也不确定公司以后会不会让我做前端去,做些简单的实例既不需要花费很多时间,也可以提高自己的自信和成就感,所以跟着明哥走,没有错,来吧!

导航

✪  Vue开发实例目录总索引
上一篇【9】按钮的使用
下一篇【11】el-menu实现左侧菜单导航

属性说明:

参数说明类型可选值默认值
type类型stringprimary / success / warning / danger / infodefault
underline是否下划线booleantrue
disabled是否禁用状态booleanfalse
href原生 href 属性string-
icon图标类名string-

基础用法

 <div>
    <el-link href="https://www.baidu.com" target="_blank">默认链接</el-link>
     <el-link type="primary">主要链接</el-link>
     <el-link type="success">成功链接</el-link>
     <el-link type="warning">警告链接</el-link>
     <el-link type="danger">危险链接</el-link>
     <el-link type="info">信息链接</el-link>
 </div>

在这里插入图片描述

禁用

设置 disabled 属性即可

<div>
    <el-link href="https://www.baidu.com" target="_blank" disabled>默认链接</el-link>
    <el-link type="primary" disabled>主要链接</el-link>
    <el-link type="success" disabled>成功链接</el-link>
    <el-link type="warning" disabled>警告链接</el-link>
    <el-link type="danger" disabled>危险链接</el-link>
    <el-link type="info" disabled>信息链接</el-link>
</div>

在这里插入图片描述

下划线

当鼠标移动到链接文字的时候,会有下划线,如果我不想要这个下划线,加入underline属性设置为false即可,写法如下:
:underline=“false”

<div>
   <el-link href="https://www.baidu.com" target="_blank" :underline="false">默认链接</el-link>
   <el-link type="primary" :underline="false">主要链接</el-link>
   <el-link type="success" :underline="false">成功链接</el-link>
   <el-link type="warning" :underline="false">警告链接</el-link>
   <el-link type="danger" :underline="false">危险链接</el-link>
   <el-link type="info" :underline="false">信息链接</el-link>
</div>

在这里插入图片描述

图标

<div>
  <el-link icon="el-icon-edit">编辑</el-link>
  <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
</div>

在这里插入图片描述

小结

这节总结了“Link 文字链接”,希望能对大家有所帮助,请各位小伙伴帮忙 【点赞】+【收藏】+ 【评论区打卡】, 如果有兴趣跟小明哥一起学习Java的,【关注一波】不迷路哦。
请到文章下方帮忙【一键三连】谢谢哈!

在这里插入图片描述

导航

✪  Vue开发实例目录总索引
上一篇【9】按钮的使用
下一篇【11】el-menu实现左侧菜单导航

热门专栏推荐

【1】Java小游戏(俄罗斯方块、植物大战僵尸等)
【2】JavaWeb项目实战(图书管理、宿舍管理等)
【3】JavaScript精彩实例(飞机大战、验证码等)
【4】Java小白入门200例
【5】从零学Java、趣学Java
【6】IDEA从零到精通
在这里插入图片描述

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程界小明哥

请博主喝瓶水,博主持续输出!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值