排他思想详解

核心思路一
  1. 获取目标元素,得到一个存储元素对象数的组;
  2. 我们先把所有目标元素的指定样式初始化 (干掉所有人);
  3. 再重新给指定的元素对象添加自己想要的样式(留下我自己);

这种写法有个致命的缺点,就是每次运行此代码都会遍历一次数组,去掉每个元素的样式(包括自己),然后再给指定的元素添加样式,浏览器的重复执行了很多任务,代码运行效率不高。

示例:

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
    // 1. 获取所有按钮元素,btns得到的是伪数组  里面的每一个元素 btns[i]
    let btns = document.getElementsByTagName('button');
    // 给每个元素添加点击事件
    for (let i = 0; i < btns.length; i++) {
        btns[i].onclick = function() {
            // 2. 我们先把所有的按钮背景颜色去掉  干掉所有人
            for (let j = 0; j < btns.length; j++) {
                btns[j].style.backgroundColor = '';
            }
            // 3. 然后才让当前的元素背景颜色为pink 留下我自己
            this.style.backgroundColor = 'pink';
        }
    }
</script>

在这里插入图片描述

核心思路二:

遍历每一个目标元素,判断这个元素与 this 是不是同一个;是则修改样式,不是则初始化样式。

//  获取所有按钮元素,btns得到的是伪数组  里面的每一个元素 btns[i]
let btns = document.getElementsByTagName('button');
// 给每个元素添加点击事件
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        for (let j = 0; j < btns.length; j++) {
            // 判断当前元素是否被点击
            if (btns[j] === this) {
                // 是则修改样式
                this.style.backgroundColor = 'skyblue';
            } else {
                // 不是则初始化样式
                btns[j].style.backgroundColor = '';
            }
        }
    }
}

在这里插入图片描述

第二种排他思想跟只是增加了 if 判断;判断是自己就修改样式,不是自己就设置默认样式,但是大大提高了代码效率。

另一种情况

目标元素中,有一个元素默认被选中

  1. 找到默认被选中的元素,将其 用于选中 的类名移除
  2. 给当前被选中的元素添加 用于选中 的类名
<div class="tab">
    <button class="tab-item active">按钮1</button>
    <button class="tab-item">按钮2</button>
    <button class="tab-item">按钮3</button>
    <button class="tab-item">按钮4</button>
    <button class="tab-item">按钮5</button>
</div>
.active {
    color: red;
    font-size: 24px;
    background-color: skyblue;
}
//  获取 .tab 下的所有 .tab-item 元素
let tabS = document.querySelectorAll('.tab .tab-item');

// 给每个 .tab-item 添加点击事件
for (let i = 0; i < tabS.length; i++) {
    tabS[i].addEventListener('click', function() {
        // 找到 tab栏 中第一个 .active 将其删除
        document.querySelector('.tab .active').classList.remove('active');
        // 给当前被点击的元素添加 .active
        this.classList.add('active');
    });
}

在这里插入图片描述

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中使用思想,可以通过以下几种方式实现: 1. 使用v-if或v-show指令:您可以根据条件来决定显示或隐藏某个组件或元素。通过给多个组件或元素设置不同的条件,可以实现只显示其中一个的效果。例如: ```html <div v-if="selectedTab === 'tab1'">Tab 1 content</div> <div v-if="selectedTab === 'tab2'">Tab 2 content</div> <div v-if="selectedTab === 'tab3'">Tab 3 content</div> ``` 2. 使用计算属性:您可以根据条件返回特定的组件或元素。通过在计算属性中判断选中的标签,然后返回对应的内容,可以实现他性。例如: ```html <template> <div> <component :is="selectedTabComponent"></component> </div> </template> <script> export default { data() { return { selectedTab: 'tab1' }; }, computed: { selectedTabComponent() { if (this.selectedTab === 'tab1') { return 'Tab1Component'; } else if (this.selectedTab === 'tab2') { return 'Tab2Component'; } else if (this.selectedTab === 'tab3') { return 'Tab3Component'; } } } }; </script> ``` 3. 使用Vue Router:如果您的他性是在不同的路由之间切换,您可以使用Vue Router来实现。通过定义不同的路由,并使用`<router-view>`来渲染当前路由的组件,可以实现他性。例如: ```html <template> <div> <router-link to="/tab1">Tab 1</router-link> <router-link to="/tab2">Tab 2</router-link> <router-link to="/tab3">Tab 3</router-link> <router-view></router-view> </div> </template> <script> import Tab1Component from './Tab1Component.vue'; import Tab2Component from './Tab2Component.vue'; import Tab3Component from './Tab3Component.vue'; export default { components: { Tab1Component, Tab2Component, Tab3Component } }; </script> ``` 以上是几种在Vue中实现他性的方法。您可以根据具体情况选择适合您的方式来实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值