suchen

Heim  >  Artikel  >  Web-Frontend  >  Vue implementiert eine Hervorhebungsmethode für Etikettenklicks

Vue implementiert eine Hervorhebungsmethode für Etikettenklicks

亚连
亚连Original
2018-05-29 17:06:362482Durchsuche

Jetzt werde ich Ihnen eine Methode zur Implementierung einer Tag-Klick-Hervorhebung in Vue vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich sein wird.

lautet wie folgt: 

<!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>

Das Obige habe ich für alle zusammengestellt, Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Beispiel für eine Ajax-Überprüfung basierend auf jQuery, um zu überprüfen, ob der Benutzername verfügbar ist

Auslöser eingeben Von jQuery implementierte Schaltfläche Beispiel einer Ereignisfunktion

jQuery+Cookie implementiert die Skin-Switching-Funktion

Das obige ist der detaillierte Inhalt vonVue implementiert eine Hervorhebungsmethode für Etikettenklicks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ein Beispiel für die Verwendung von Vue mit Echarts, um einen Klick-Hervorhebungseffekt zu erzielenNächster Artikel：Ein Beispiel für die Verwendung von Vue mit Echarts, um einen Klick-Hervorhebungseffekt zu erzielen

In Verbindung stehende Artikel

Mehr sehen