vue实现点击选中,其他的不选中方法
更新时间：2018年09月05日 15:56:20 作者：Alice9969
今天小编就为大家分享一篇vue实现点击选中,其他的不选中方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选中效果</title>
<script src="../static/js/vue.min.js"></script>
<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>
<script>
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;
}
}
});
</script>
</body>
</html>
以上这篇vue实现点击选中,其他的不选中方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue directive定义全局和局部指令及指令简写,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
最近搭建一个Springboot+vue前后端分离项目,真的很简单,下面这篇文章主要给大家介绍了关于如何在Vue和Spring boot之间实现前后端连接的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue项目中使用window的onresize事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
MVVM旨在利用WPF中的数据绑定函数,通过从视图层中几乎删除所有GUI代码（代码隐藏）,更好地促进视图层开发与模式其余部分的分离,这篇文章主要给大家介绍了关于Vue.js中MVVM的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了基于vue3.0.1beta搭建仿京东的电商H5项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了Vue读取本地静态文件json的2种方法以及优缺点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
之前在网上看到《蓝色拼图》这款小游戏，作者是用jquery写的。下面通过本文给大家分享基于vue.js编写蓝色拼图小游戏，一起看看实现代码吧2017-03-03
这篇文章主要给大家介绍了关于Vue科学计数法常见处理方法的相关资料,科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,文中给出了详细的代码示例,需要的朋友可以参考下2024-02-02
这篇文章主要为大家剖析了Vue原理，实现双向绑定MVVM，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了如何使用HBuilderX把vue项目打包成apk，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论