简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

vue實作a標籤點選高亮方法

亚连
發布： 2018-05-29 17:06:36
原創
2474 人瀏覽過

下面我就為大家分享一篇vue實現a標籤點擊高亮方法，具有很好的參考價值，希望對大家有所幫助。

如下：

<!DOCTYPE html>
<html
lang="en">
<head>
<title></title>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1">
<!--<link href="css/style.css" rel="external nofollow" rel="stylesheet">-->
<script
src="js/jquery.js"></script>
<script
src="js/vue(2.0).js"></script>
<style
lang="less"
rel="stylesheet/less">
.a {
display:
block;
float:
left;
margin-left:
20px;
}
.active {
color:
red;
font-size:
17px;
}
</style>
</head>
<body>
<p
id="app">
<a
class="s-bt" @click="selected(Aname.name)"
 :class="{active: active == Aname.name}"
v-for="Aname in Alist">{{Aname.name}}</a>
</p>
<script>
new
Vue({
el:
&#39;#app&#39;,
data: {
Alist: [{
name:
&#39;影视大咖&#39;
}, {
name:
&#39;女明星&#39;
}, {
name:
&#39;男明星&#39;
}, {
name:
&#39;商业大亨&#39;
}],
active:
&#39;&#39;
},
mounted() {
},
methods: {
selected(name) {
this.active
= name;
}
}
})
</script>
</body>
</html>
登入後複製

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

基於jQuery實作Ajax驗證使用者名稱是否可用實例

jQuery實作的回車觸發按鈕事件功能範例

jQuery Cookie實作切換皮膚功能

# #

以上是vue實作a標籤點選高亮方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
方法 點選 高亮
來源：php.cn
上一篇：vue結合Echarts實現點擊高亮效果的範例 下一篇：Vue-路由導航功能表列的高亮設定方法
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
2
1429
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
1361
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
如何在 React 中的排序方法上觸發渲染（帶有過濾器和分頁）？ 這是我的Sort.js樣式元件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
來自於 2024-04-06 21:28:37
0
1
2257
數獨檢查器無法運作？誰能幫我辨識錯誤？ 我嘗試了在線編輯器上的所有方法，但仍然收到錯誤。但當我在我的機器上的VSCode上執行此操作時，它工作正常。我很困惑，在沒有發現錯誤的情況下無法提交程式碼。我不知道該去哪裡找了。我...
來自於 2024-04-06 21:21:07
0
1
474
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！