在Vue 3中,想要跳轉到外部鏈接非常簡單,只需要使用HTML的a標簽并將Vue實例屬性轉化為該標簽的屬性即可。下面是一個實例:
<template> <div> <a :href="myLink" target="_blank">跳轉到百度</a> </div> </template> <script> export default { data() { return { myLink: "https://www.baidu.com" } } } </script>
在例子中,我們使用了Vue實例屬性myLink來綁定到HTML的a標簽的href屬性,表示跳轉到該鏈接,同時還指定了target為"_blank",表示在新窗口打開鏈接。
此外,還可以使用Vue組件的方式來實現外部鏈接的跳轉。下面是一個基于Vue全局組件的實現:
<template> <div class="my-link"> <a :href="link" target="_blank">{{ title }}</a> </div> </template> <script> Vue.component('my-link', { props: ['link', 'title'], template: ` <div class="my-link"> <a :href="link" target="_blank">{{ title }}</a> </div> ` }); </script>
在組件的props中定義了傳入的鏈接和鏈接名稱,然后在模板中使用屬性綁定的方式將傳入的值賦給a標簽的href和文字屬性。
上一篇gson和json的聯系
下一篇mysql取出字段多個值