如下所示：
<!DOCTYPE html>
<html>
<head>
< charset="UTF-8">
< name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
< http-equiv="X-UA-Compatible" content="ie=edge">
< >选中效果</ >
< src="../static/js/vue.min.js"></ >
<style>
ul li.active{
color: green;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="items in navList" :class="{active:items.isActive}" @click="activeFun(items)">
<a>
{{items.text}}
</a>
</li>
</ul>
</div>
< >
new Vue({
el: '#app',
data: {
navList: [
{text: '首页', isActive: true},
{text: '简介', isActive: false},
{text: '活动', isActive: false},
{text: '联系', isActive: false}
]
},
methods: {
activeFun: function(data){
this.navList.forEach(function(obj){
obj.isActive = false;
});
data.isActive = !data.isActive;
}
}
});
</ >
</body>
</html>
以上这篇vue实现点击选中,其他的不选中方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
-
8 分钟了解 Kubernetes
2026-05-18栏目： 教程
-
Helm 从入门到实践 | 从 0 开始制作一个 Helm Charts
2026-05-18栏目： 教程
-
阿里云突发性能实例t5 和共享型实例xn4 n4的区别
2026-05-18栏目： 教程
-
【DockerCon2017技术解读】Docker特性介绍
2026-05-18栏目： 教程
-
面向海量数据的极致成本优化-云HBase的一体化冷热分离
2026-05-18栏目： 教程