Vue implements a label click highlighting method-JS Tutorial-php.cn

Vue implements a label click highlighting method

亚连

Release： 2018-05-29 17:06:36

Original

2475 people have browsed it

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:
&#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>

Copy after login

The above is what I compiled for everyone, I hope It will be helpful to everyone in the future.

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!