vue2.0选中active后其他选项互斥实现步骤

来源：懂视网责编：小采时间：2020-11-27 19:51:19

vue2.0选中active后其他选项互斥实现步骤

vue2.0选中active后其他选项互斥实现步骤:这次给大家带来vue2.0选中active后其他选项互斥实现步骤，vue2.0选中active后其他选项互斥的注意事项有哪些，下面就是实战案例，一起来看一下。在正常的js中。我们如果要实现点击选中active然后其他取消的效果，我们可以定义一个类，当点击的时候给给多有的d

推荐度：

点击下载本文 文档为doc格式

导读vue2.0选中active后其他选项互斥实现步骤:这次给大家带来vue2.0选中active后其他选项互斥实现步骤，vue2.0选中active后其他选项互斥的注意事项有哪些，下面就是实战案例，一起来看一下。在正常的js中。我们如果要实现点击选中active然后其他取消的效果，我们可以定义一个类，当点击的时候给给多有的d

这次给大家带来vue2.0选中active后其他选项互斥实现步骤，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这个类名。说的很简练，不懂的可以加博主一起探讨

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

vue2.0选中active后其他选项互斥实现步骤

推荐度：

点击下载本文 文档为doc格式

标签：方法实现互斥

热门焦点

vue2.0选中active后其他选项互斥实现步骤

vue2.0选中active后其他选项互斥实现步骤

vue2.0选中active后其他选项互斥实现步骤

最新推荐

猜你喜欢

热门推荐