用vue2.0实现点击选中active其他选项互斥的效果
更新时间：2018年04月12日 16:14:46 作者：明明一颗大白菜
这篇文章主要介绍了用vue2.0实现点击选中active其他选项互斥的效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在正常的js中。我们如果要实现点击选中active然后其他取消的效果，我们可以定义一个类，当点击的时候给给多有的dom取消active的类，给当前元素加上这个类名，说的很啰嗦，直接来看代码说话吧（表示楼主用的是jq）:
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
width: 100px;
margin-top: 10px;
border: 1px solid red;
}
li:active {
cursor: pointer;
}
.active {
background-color: aqua;
}
</style>
<script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script>
</head>
<body>
<ul>
<li>this is pne</li>
<li>this is two</li>
<li>this is three</li>
</ul>
</body>
<script>
$(() => {
$("li").click((e) => {
$("li").removeClass("active");
$(e.target).addClass("active");
})
})
</script>
效果如下图所示：
但是在vue里面，是不提倡进行dom操作的，如果非进行dom的话，vue2.0里面有一个ref的属性，是可以达到dom的效果的。那么接下来我们不接住dom来进行操作：
由于习惯了webpack和vue-cli脚手架，所以楼主所有vue的代码都是放在webpack的脚手架当中进行，还使用了pug和scss的预处理器，vue的代码如下：
<template lang="pug">
ul
li(v-for="(item,index) in classArr", @click="result(index)", :class="resultNum === index?'active':''") this is {{item}}
</template>
<style lang="scss">
li {
list-style: none;
width: 100px;
margin-top: 10px;
border: 1px solid red;
&:hover {
cursor: pointer;
}
}
.active{
background-color: aqua;
}
</style>
<script>
export default{
data(){
return {
classArr: ["one", "two", "three"],
num:"",
}
},
methods: {
result(index){
this.num = index;
}
},
computed:{
resultNum(){
return this.num;
}
}
}
</script>
思路如下：
这段代码使用的是index这个关键字，还使用了computed这个计算属性，当当前的index索引与点击的当前元素的下标相同的时候，便会触发active这个类名。说的很简练，不懂的可以加博主一起探讨
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下2016-10-10
本文主要介绍了vue清空数组的几个方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形,下面通过本文给大家分享Vue.js中的图片引用路径的方式，感兴趣的朋友一起看看吧2017-07-07
热更新全称Hot Module Reload,常常在构建工具里面出现,下面这篇文章主要介绍了Vue Vite热更新不起作用的正确解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要为大家详细介绍了Vue实现div滚轮放大缩小，拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
vue+axios methods方法return取不到值问题及解决
这篇文章主要介绍了vue+axios methods方法return取不到值问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue.js计算属性和侦听器的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了vue input框的禁用和可输入问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最近被问起是否了解vue的插槽（slot），咋一想发现，似乎很少用到这玩意。所以整理了下slot的一些用法2022-08-08
这篇文章主要介绍了vue使用插槽分发内容slot的用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
最新评论