好的，所以我正在做 laravel vue js 專案，我想在方法中傳遞一個鏈接（下面的代碼）。單擊 div 時，我希望被帶到該站點 ( www.google.com )，如下所示。我在這里嘗試了類似帖子中給出的一些解決方案，但沒有運氣。
<template>
<div style="cursor:pointer;" @mouseover="showMe" @mouseout="hideMe" @click="goToMySite">
<h6 v-show="goTolink === false">Hover Me</h6>
<h6 v-show="goToLink === true"> Click to visit My Site </h6>
</div>
</template>
<script>
export default {
props: [],
data() {
return {
goTolink: false,
}
},
methods: {
showMe(){
this.goTolink = true
},
hideMe(){
this.goTolink = false
},
goToMySite(){
href='http://www.google.com'
}
}
}
</script>
<style>
</style>
uj5u.com熱心網友回復：
使用location物件window。
goToMySite(){
window.location.href='http://www.google.com'
}
uj5u.com熱心網友回復：
您的代碼中有幾個問題。
- 聽眾不在好地方。通過在父容器上設定它，鏈接將永遠不會出現，因為它的父容器不再顯示。
- 您應該使用
mouseenter/mouseleave而不是mouseover/mouseout，這會觸發很多不必要的事件 - 在這種用例中，您必須使用
v-if/v-else而不是v-show。 href不存在于您的goToMySite方法中
這是一個作業示例：
<template>
<div style="cursor:pointer;">
<h6 v-if="! goTolink"
@mouseenter="showMe">Hover Me</h6>
<h6 v-else
@mouseleave="hideMe"
@click="goToMySite">Click to visit My Site</h6>
</div>
</template>
<script>
export default {
props: [],
data() {
return {
goTolink: false,
href: 'https://www.google.com'
}
},
methods: {
showMe() {
this.goTolink = true
},
hideMe() {
this.goTolink = false
},
goToMySite() {
// Do what you want here, for example
window.open(this.href, '_blank');
}
}
}
</script>
還有一個片段（window.open 在這里不起作用，但在常規檔案中沒問題）：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<div style="cursor:pointer;">
<h6 v-if="! goTolink"
@mouseenter="showMe">Hover Me</h6>
<h6 v-else
@mouseleave="hideMe"
@click="goToMySite">Click to visit My Site</h6>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
goTolink: false,
href: 'https://www.google.com'
},
methods: {
showMe() {
this.goTolink = true
},
hideMe() {
this.goTolink = false
},
goToMySite() {
// Do what you want here, for example
console.log(`Let's visit ${this.href}`);
window.open(this.href, '_blank');
}
}
})
</script>
</body>
</html>順便提一些提示：
- 不要使用行內樣式
- 除非您想處理
false,null和之間的差異，否則您undefined可以使用測驗值是否不存在! value（value如果您想知道變數是否已定義） - 在這里
a為您的鏈接使用標簽可能更相關（并對其進行樣式設定，使其看起來像您的h6）
您還可以通過goToLink其他方式處理價值變化（但這些都是主觀選擇）。例如在模板中（因此您可以洗掉方法showMe和hideMe）：
<h6 v-if="! goTolink"
@mouseenter="goTolink = true">Hover Me</h6>
<h6 v-else
@mouseleave="hideMe"
@click="goTolink = false">Click to visit My Site</h6>
或者
<h6 v-if="! goTolink"
@mouseenter="goTolink = ! goTolink">Hover Me</h6>
<h6 v-else
@mouseleave="hideMe"
@click="goTolink = ! goTolink">Click to visit My Site</h6>
或僅保留一種切換方法：
<h6 v-if="! goTolink"
@mouseenter="toggleLink">Hover Me</h6>
<h6 v-else
@mouseleave="toggleLink"
@click="toggleLink">Click to visit My Site</h6>
methods: {
toggleLink() {
this.goTolink = ! this.goTolink;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/342594.html
標籤：javascript Vue.js
上一篇：將復選框的字串轉換為布林值