VUE列表内容显示与隐藏

最新推荐文章于 2023-08-21 16:48:24 发布

打小又皮又闹

最新推荐文章于 2023-08-21 16:48:24 发布

阅读量1.3k

点赞数 1

分类专栏：日常总结

本文链接：https://blog.csdn.net/weixin_48181168/article/details/118555048

版权

日常总结专栏收录该内容

20 篇文章 3 订阅

订阅专栏

效果如下:

第一种方式:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    li {
      padding-left: 10px;
      line-height: 2;
    }

    li:hover {
      background-color: #eee;
    }

    .list {
      padding: 0 50px;
    }

    .list .title {
      border: 1px solid #ccc;
      padding: 10px 5px;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
      font-size: 18px;
      font-weight: bold;
    }

    .list .item {
      border: 1px solid #ccc;
    }

    .list:not(:nth-of-type(1)) .item {
      display: none;
    }

    .list:not(:nth-of-type(2)) .item {
      display: none;
    }

    .list:not(:nth-of-type(3)) .item {
      display: none;
    }
  </style>
</head>

<body>
  <div id="app">
    <list-active></list-active>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script>
  // 自定义一个局部组件
  Vue.component("list-active", {
    template:
      `
            <div>
               <div class="list" v-for="(l,i) in lists" :key="i">
                      <div class="title" @click="toggle($event)">{{l.title}}</div>
                      <ul class="item">
                          <li v-for="(item,index) in l.items" :key="index">{{item}}</li>
                      </ul>
                  </div>  
            </div>
          `,
    data: function () {
      return {
        lists: [
          { title: '我的同学', items: ["张三", "李四", "王五"] },
          { title: '我的同事', items: ["张三1", "李四1", "王五1"] },
          { title: '我的家人', items: ["张三2", "李四2", "王五2"] }
        ],
        
      }
      
    },
    methods: {
        toggle(){
          var $title = $(event.target);
          console.log(event.target);
          $title.next().toggle(1000);
        }
      }
  }),
    new Vue({
      
      el: "#app",
      
    });
</script>

</html>

第二种写法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul{
            list-style: none;
        }

        li{
            padding-left: 10px;
            line-height: 2;
        }

        li:hover{
            background-color: #eee;
        }

        .list{
            padding: 0 50px;
        }

        .list .title{
            border: 1px solid #ccc;
            padding: 10px 5px;
            cursor: pointer;
            -webkit-user-select: none;
            user-select: none;
            font-size: 18px;
            font-weight: bold;
        }

        .list .item{
            border: 1px solid #ccc;
        }

    </style>
</head>
<body>
    <div id="app">
        <div class="list" v-for="(l,i) in lists" :key="i">
            <div class="title" @click="gui==i ? gui=1000:gui=i">{{l.title}}</div>
            <ul class="item" v-show="gui==i">
                <li v-for="(item,index) in l.items" :key="index">{{item}}</li>
            </ul>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                lists: [
                    { title:'我的同学', items:["张三", "李四", "王五"] },
                    { title:'我的同事', items:["张三1", "李四1", "王五1"] },
                    { title:'我的家人', items:["张三2", "李四2", "王五2"] }
                ],
                gui:""
            },
        
        })
    </script>
</body>
</html>

第三种写法:创建group.vue 和 list.vue文件把数组放在App.vue文件中

数据如下`:

friends: [
            {
              name: "同学",
              list: [
                { name: "祥子", sign: "让自己放肆的笑", online: true },
                { name: "静静", sign: "时光是陪你最久的爱人", online: true },
                { name: "影子", sign: "不忘初心,方得始终", online: true },
              ],
            },
            {
              name: "朋友",
              list: [
                { name: "八蛋", sign: "让自己放肆的笑", online: true },
                { name: "瑞瑞", sign: "时光是陪你最久的爱人", online: true },
                { name: "影子", sign: "不忘初心,方得始终", online: true },
              ],
            },
            {
              name: "亲戚",
              list: [
                { name: "阿爸", sign: "让自己放肆的笑", online: true },
                { name: "阿妈", sign: "时光是陪你最久的爱人", online: true },
                { name: "婆婆", sign: "不忘初心,方得始终", online: false }, 
              ],
            },
          ],

在group.vue文件中的代码如下:

<template>
  <div class="group-root" @click="groupClick()">
    <div class="group-top">
      <span class="{arrownDown:isOpen}">&gt;</span>
      <span>{{ groupOb.name }}</span>
      <span class="rt">{{ onlineNumber }}/{{ groupOb.list.length }}</span>
    </div>
    <ul v-show=" isOpen">
     <Component-List 
     v-for="(friendList, index) in groupOb.list" :key="index" :person="friendList"
     ></Component-List>
    </ul>
  </div>
</template>

<script>
// 引入列表组件
import ComponentList from "./02list.vue"
export default {
  // 传过来的 分组信息{name:"同学" ,list:{name:"小明",sing:"",online:true}}
  props: {
    groupOb: {
      type: Object,
    },
  },

  data: function () {
    return {
      isOpen: false,
    };
  },
  methods:{
    //   点击组件名
    groupClick(){
        this.isOpen = !this.isOpen
    }
  },
  computed: {
    onlineNumber() {
      //   filter 返回符合条件的 元素  整合到 数组里面
      //   true 就是当前元素 符合帅选条件 返回这个元素
    //   false 就是当前元素 不符合帅选条件 过滤掉 不要
    // forEach  some  filter 
    // 记住一点 能不用基础的for 循环 就不用了
      var onlineArr = this.groupOb.list.filter((item) => {
        return item.online;
      });
      return onlineArr.length
    //   return 1
    },
  },
  components:{
       ComponentList
  }
};
</script>

<style lang="less" scoped>
.group-root {
  text-align: left;
  ul {
    list-style: none;
  }
  .group-top {
    background-color: #dedede;
    height: 50px;
    line-height: 50px;
    padding: 5px;
    margin-bottom: 5px;
    .arrownDown {
        display: inline-block;
      transform: rotate(90deg);
    //   行内元素不能  使用这个transform
      
    //   background-color: red;
    }
    .rt {
      float: right;
    }
  }
}
</style>

在list.vue文件写入代码如下:'

<template>
  <li class="zh-list">
      <h3>{{person.name}}</h3>
      <span>{{person.sign}}</span>

  </li>
</template>

<script>
export default {
    // 组件外 使用者传过来 对象数组
    props:{
        person:{
            require:true,
            type:Object
        }
    }

}
</script>

<style lang="less" scoped>
.zh-list{
    text-align: left;
    background-color: white;
    list-style: none;
    color: #666;
    border-bottom: 1px solid #000;
}

</style>

打小又皮又闹

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
VUE列表内容显示与隐藏

效果如下:第一种方式:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &
复制链接

扫一扫