Below I will share with you an article on how to implement a tag click highlighting in Vue. It has a good reference value and I hope it will be helpful to everyone.
is as follows:
<!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>The above is what I compiled for everyone, I hope It will be helpful to everyone in the future.
Related articles:
Implementing Ajax based on jQuery to verify whether the user name is available Example
Enter trigger button implemented by jQuery Event function example
jQuery Cookie implements skin switching function
# #
The above is the detailed content of Vue implements a label click highlighting method. For more information, please follow other related articles on the PHP Chinese website!
Computer 404 error page
Solution to the Invalid Partition Table prompt when Windows 10 starts up
How to solve the problem of missing ssleay32.dll
How to set IP
How to open state file
Why is the mobile hard drive so slow to open?
What are the basic units of C language?
What platform is Kuai Tuan Tuan?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
