在el-link里面拼接链接
时间: 2023-02-09 09:57:11 浏览: 97
如果你想在 el-link 中拼接链接,你可以这样写:
```
<el-link :href="'https://www.example.com/' + linkPath">链接文字</el-link>
```
其中,linkPath 是一个变量,表示你希望拼接的链接路径。拼接之后的链接类似于 `https://www.example.com/linkPath`。
注意,你需要使用 v-bind 指令(:)来绑定 href 属性,并使用单引号('')将拼接的字符串括起来。
相关问题
template里面添加el-link标签
template 里面可以添加 el-link 标签来创建一个链接。
你可以使用 el-link 标签来像这样创建一个链接:
```
<template>
<div>
<el-link :to="linkAddress">链接文本</el-link>
</div>
</template>
<script>
export default {
data() {
return {
linkAddress: '/some/path'
}
}
}
</script>
```
el-link 标签有许多可选的属性,例如:
- to: 链接的目标地址
- tag: 链接使用的标签(默认是 "a" 标签)
- replace: 是否使用 replaceState 替换当前历史记录
- append: 是否在当前路径后追加链接路径
- exact: 是否要求精准匹配
你可以在官方文档中了解更多关于 el-link 的信息:https://element.eleme.cn/#/zh-CN/component/link
vue el-link
`<el-link>` 是 Element UI 中提供的链接组件,用于创建带有样式的链接。它具有以下特点:
- 支持不同的 type 类型,包括 primary、success、warning、danger 和 info。
- 支持不同的 underline 样式,包括 always、hover 和 never。
- 支持 disabled 和 loading 状态。
- 可以通过 href 属性设置链接地址,也可以通过 to 属性设置路由地址。
使用示例:
```html
<template>
<el-link href="https://www.example.com">普通链接</el-link>
<el-link type="primary" underline="hover">主要链接</el-link>
<el-link type="success" :disabled="true">禁用链接</el-link>
<el-link type="warning" :loading="true">加载中...</el-link>
<el-link to="/home" type="danger">路由链接</el-link>
</template>
```
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)