点击按钮切换div及其内容（两种方法：Vue指令方式、原生DOM操作方式）

敬之

已于 2024-08-21 12:12:27 修改

阅读量10w+

点赞数 61

分类专栏：前端实战知识集锦文章标签： javascript html 前端 dom操作 vue.js

于 2021-12-15 09:18:46 首次发布

本文链接：https://blog.csdn.net/weixin_53072519/article/details/121854656

版权

前端实战知识集锦专栏收录该内容

19 篇文章

订阅专栏

案例效果：

方法一使用vue框架的指令，方便高效（推荐，项目常用）

方法二使用DOM操作（不推荐，了解即可）

V-for、V-show指令介绍及用法

案例效果：

方法一使用vue框架的指令，方便高效（推荐，项目常用）

大致思路：

v-for 指令通过数组遍历按钮，创建方法使用数组下标 index 来控制按钮的选中状态，index 为0时表示第一个按钮被选中，依次类推；

data 中设置变量 number 来表示点击后的值，与下标同步且只有点击后才会为 number 赋值；

v-show 控制 div 的显示与隐藏，并将 v-show 后面的判断条件与数组下标 index 绑定，也就是使得下标为某个值时某个对应的 div 就显示，比如在此程序中 index 为1时，number == 1，则代表第二个 div 显示；

: class 动态绑定样式，为按钮设置两个类名两种样式 .btn 和 .btn1，用于选中和未选中的区分，点击后 number 值等于下标值时该按钮高亮显示；

完整代码如下：

<template>
  <div class="tab">
    <div class="content">
      <div style="margin: auto;width: 90%">
        <!--4个按钮-->
        <button :class="index == number ? 'btn1':'btn'" @click="tab(index)" v-for="(item ,index) in dataList"
                :key="index">{{item.option}}
        </button>
      </div>
      <!--4个div-->
      <div id="content1" v-show="number == 0">
        <span>Java语言：Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念。</span>
      </div>
      <div id="content2" v-show="number == 1">
        <span>C语言：C语言是一门面向过程的、抽象化的通用程序设计语言，广泛应用于底层开发。</span>
      </div>
      <div id="content3" v-show="number == 2">
        <span>JavaScript：是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</span>
      </div>
      <div id="content4" v-show="number == 3">
        <span>PHP：是在服务器端执行的脚本语言，尤其适用于Web开发并可嵌入HTML中。</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "tab",
    data() {
      return {
        number: 0, //点击后的值，与下标同步，为0表示默认第一个按钮与div为选中状态
        dataList: [
          {option: 'Java'},
          {option: 'C+'},
          {option: 'JavaScript'},
          {option: 'PHP'},
        ]
      }
    },
    methods: {
      //定义切换方法
      tab(index) {
        this.number = index;
        // console.log(index, this.number);
      }
    }
  }
</script>

<style scoped lang="less">
  .content {
    width: 700px;
    margin: auto;
    /*按钮样式*/
    /*未选中时*/
    .btn {
      width: 150px;
      height: 40px;
      border: 0;
      border-radius: 5px;
      color: white;
      margin: 20px 3px;
      background-color: #35cc8f;
    }

    /*选中时*/
    .btn1 {
      width: 150px;
      height: 40px;
      border: 0;
      border-radius: 5px;
      color: white;
      margin: 20px 3px;
      background-color: #099941;
    }

    #content1, #content2, #content3, #content4 {
      background-color: #c1f8c9;
      height: 300px;
      font-size: 16px;
      line-height: 40px;
    }
  }
</style>

方法二使用DOM操作（不推荐，了解即可）

大致思路：为每个按钮设置点击事件并传值，通过switch方法来控制选中项，选中后用DOM操作获取对应的元素并设置对应的属性和样式；

完整代码如下：

<template>
  <div class="tab">
    <div class="content">
      <div style="margin: auto;width: 90%">
        <!--4个按钮-->
        <button id="btn1" @click="tab(1)">Java</button>
        <button id="btn2" @click="tab(2)">C+</button>
        <button id="btn3" @click="tab(3)">JavaScript</button>
        <button id="btn4" @click="tab(4)">PHP</button>
      </div>
      <!--4个div-->
      <div id="content1"><span>Java语言：Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念。</span></div>
      <div id="content2"><span>C语言：C语言是一门面向过程的、抽象化的通用程序设计语言，广泛应用于底层开发。</span></div>
      <div id="content3"><span>JavaScript：是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</span></div>
      <div id="content4"><span>PHP：是在服务器端执行的脚本语言，尤其适用于Web开发并可嵌入HTML中。</span></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "tab",
    data() {
      return {
        lastBtn: 'btn1', //默认第一个按钮被选中
        lastContent: 'content1' //默认显示第一个div
      }
    },
    methods: {
      tab(num) {
        var a; //未选中时的按钮
        var a_content; //未选中时的div
        var b; //选中时的按钮
        var b_content; //选中时的div
        switch (num) {
          //选中的btn为#099941，选中的content为display:block
          case 1:
            a = document.getElementById(this.lastBtn);
            a.style.backgroundColor = '#35cc8f';
            b = document.getElementById('btn1');
            b.style.backgroundColor = '#099941';
            a_content = document.getElementById(this.lastContent);
            a_content.style.display = 'none';
            b_content = document.getElementById('content1');
            b_content.style.display = 'block';
            this.lastContent = 'content1';
            this.lastBtn = "btn1";
            break
          case 2:
            a = document.getElementById(this.lastBtn);
            a.style.backgroundColor = '#35cc8f';
            b = document.getElementById('btn2');
            b.style.backgroundColor = '#099941';
            a_content = document.getElementById(this.lastContent);
            a_content.style.display = 'none';
            b_content = document.getElementById('content2');
            b_content.style.display = 'block';
            this.lastContent = 'content2';
            this.lastBtn = "btn2";
            break;
          case 3:
            a = document.getElementById(this.lastBtn);
            a.style.backgroundColor = '#35cc8f';
            b = document.getElementById('btn3');
            b.style.backgroundColor = '#099941';
            a_content = document.getElementById(this.lastContent);
            a_content.style.display = 'none';
            b_content = document.getElementById('content3');
            b_content.style.display = 'block';
            this.lastContent = 'content3';
            this.lastBtn = "btn3";
            break;
          case 4:
            a = document.getElementById(this.lastBtn);
            a.style.backgroundColor = '#35cc8f';
            b = document.getElementById('btn4');
            b.style.backgroundColor = '#099941';
            a_content = document.getElementById(this.lastContent);
            a_content.style.display = 'none';
            b_content = document.getElementById('content4');
            b_content.style.display = 'block';
            this.lastContent = 'content4';
            this.lastBtn = "btn4";
            break;
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .content {
    width: 700px;
    margin: auto;

    #btn1, #btn2, #btn3, #btn4 {
      width: 150px;
      height: 40px;
      border: 0;
      border-radius: 5px;
      color: white;
      margin-bottom: 20px;
    }

    #btn1 {
      background-color: #099941;
    }

    #btn2, #btn3, #btn4 {
      background-color: #35cc8f; /*除默认选中的第一个按钮高亮显示外，其余按钮默认为浅色*/
    }

    #content1, #content2, #content3, #content4 {
      background-color: #c1f8c9;
      height: 300px;
      font-size: 16px;
      line-height: 40px;
    }

    #content2, #content3, #content4 {
      display: none; /*除默认显示的第一个外，其余的全部隐藏且不占位*/
    }
  }
</style>

V-for、V-show指令介绍及用法

v-for 指令用于基于一个数组或对象来渲染一个列表。这个指令可以遍历数组、对象、数字或字符串，但主要用于遍历数组或对象，以生成列表或表格。

基本语法

遍历数组：

<ul>  
  <li v-for="(item, index) in items" :key="index">  
    {{ item.text }}  
  </li>  
</ul>

在这个例子中，items 是一个数组，item 是当前遍历到的数组元素，index 是当前元素的索引（可选）。:key="index" 是用于提高渲染效率的key属性。

遍历对象：

<div v-for="(value, key) in object" :key="key">  
  {{ key }}: {{ value }}  
</div>

这里，object 是一个对象，value 是对象的值，key 是对象的键。

注意事项

总是为 v-for 提供一个 :key 绑定，除非你在做特定类型的优化，并且完全了解不这样做的后果。
v-for 可以有别名（如上面的 item 和 index），并且可以在数组或对象遍历中使用。
当使用 v-for 时，Vue会创建一个新的作用域，这意味着你不能在 v-for 内部直接访问父作用域中的变量，除非你明确通过 this 或其他方式引用。、

v-show 指令用于根据表达式的真假值来切换元素的CSS属性 display。当条件为真时，元素会被显示；当条件为假时，元素会被隐藏。与 v-if 不同，v-show 的元素始终会被渲染并保留在DOM中，仅仅是简单地切换CSS的 display 属性。

<p v-show="isVisible">这个段落会根据 isVisible 的值显示或隐藏。</p>

在这个例子中，isVisible 是一个数据属性，当它为 true 时，<p> 元素会显示；当它为 false 时，<p> 元素会隐藏（实际上是设置其CSS的 display 属性为 none）。

注意事项

由于 v-show 只是切换元素的 display 属性，因此当元素频繁切换显示/隐藏状态时，使用 v-show 会有更好的性能，因为不需要重新渲染DOM元素。
如果元素在初始渲染时就不应该出现在DOM中，或者元素很大，并且切换显示/隐藏状态的频率很低，那么使用 v-if 可能是更好的选择，因为它可以完全销毁和重建元素。
v-show 不支持 <template> 元素，因为它不渲染DOM元素，而只是作为包裹元素的容器。对于需要条件渲染多个元素的情况，应该使用 v-if 或 v-else-if/v-else。