Vue 实现点击展开/收起 功能

Posted 2022-12-13 wangjiahui

Vue 展开收起功能实现

之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 。因之前一值是重构，自己写功能还是比较少的，于是网上搜了一下，发现很多东西其实是jq的功能 虽然可以拿过来用，但是还是想使用vue 写出原汁原味的模块

  demo: 
<div :class="is_show ? 'new_detail' : 'work_detail'">
      <!-- 这里是操作的div 包含的文字 -->
      <!-- 这里的is——show 就是true/false -->
             <!-- // 先通过绑定class 来判断 是显示所有内容的样式 还是隐藏部分样式 -->
       </div>
        <span class="open" @click="is_show=!is_show">
        word
        <!-- 点击事件控制 class绑定所依赖的判断条件 -->
        <!-- 此时的word就是计算属性的结果 -->
        </span>
<!-- 计算属性 -->

computed: 
    // 项目内容
    word() 
      if (this.is_show === false) 
        return '展开'
       else if (this.is_show === true) 
        return '收起'
       else if (this.is_show === '') 
        return null
      
    ,

总体来说这个是个伪代码 但是实现程度已经是非常高了 基本符合vue的实现思路

求点赞