zoukankan      html  css  js  c++  java
  • Vue 实现点击展开收起

    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的实现思路

    求点赞

  • 相关阅读:
    数据结构
    java web
    C++
    SQL(结构化查询语言)
    网站协议
    python
    爬虫
    select 多选
    List 去除重复数据的五种方式
    oracle锁表SID查询
  • 原文地址:https://www.cnblogs.com/wangjiahui/p/11617577.html
Copyright © 2011-2022 走看看