Verwenden Sie Vue, um das A-Tag hervorzuheben, wenn Sie darauf klicken (Code angehängt)-js-Tutorial-php.cn

Verwenden Sie Vue, um das A-Tag hervorzuheben, wenn Sie darauf klicken (Code angehängt)

php中世界最好的语言

Freigeben： 2018-05-10 15:10:06

Original

2481 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zur Verwendung von Vue zum Hervorheben des Tags „a“ vorstellen, indem Sie darauf klicken (Code beigefügt). Welche

Vorsichtsmaßnahmen

gelten für die Verwendung von Vue zum Hervorheben? Ein Tag durch Anklicken. Das Folgende ist ein praktischer Fall. 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:
'#app',
data: {
Alist: [{
name:
'影视大咖'
}, {
name:
'女明星'
}, {
name:
'男明星'
}, {
name:
'商业大亨'
}],
active:
''
},
mounted() {
},
methods: {
selected(name) {
this.active
= name;
}
}
})
</script>
</body>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Themen im Artikel zur chinesischen PHP-Website!

Empfohlene Lektüre:
Echarts-Maus-Overlay hebt die Implementierungsschritte für Knotenbeziehungsnummern hervor

nodejs generiert QR-Code ( Am prägnantesten )

Das obige ist der detaillierte Inhalt vonVerwenden Sie Vue, um das A-Tag hervorzuheben, wenn Sie darauf klicken (Code angehängt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!