vue 实现点击按钮加载更多

梦里梦外; 2022-10-02 00:49 215阅读 0赞

<template>
      <div>
         <div v-for="(item, key) in list" v-show="key<num">
          {
       {item}}
        </div>
        <span @click="showMore">{
       {txt}}</span>
      </div>
    </template>
    <script src="https://unpkg.com/vue"></script>
    <script>
    export default {
      props: {},
      data() {
        return {
             list: [
                '111',
                '222',
                '333',
                '444',
                '555',
                '666'
              ],
              isShow: true,
              txt: '显示全部',
              num: 2
            }
    
        
      },
      methods: {
              showMore(){
            
              this.isShow = !this.isShow;
            
              this.num = this.isShow? 2: this.list.length;
              this.txt = this.isShow?  '显示全部':'收起'
            }
    
      },
      components: {},
      mounted() {}
    };
    </script>
    
    <style  lang="scss">
    
    
    * {
      padding: 0;
      margin: 0;
    }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关点击按钮加载更多(js)

/*初始化*/ var counter = 0; /*计数器*/ var pageStart = 0; /*offset*/ var pag...

迈不过友情╰/ 2024年04月19日 12:20/ 0 赞/ 24 阅读

相关 Vue中点击加载更多滚动条滚动到页面最底部

<template> <div> <div class="table-container" ref="table-container">

淩亂°似流年/ 2023年10月11日 13:35/ 0 赞/ 10 阅读

相关 vue 移动端加载更多分页组件_vue 分页加载数据页面滚动加载更多

组件源码 .vue文件 style="height:100%;overflow:auto" ref="filesTable" > ref="tableInner" c

小灰灰/ 2022年10月26日 14:09/ 0 赞/ 266 阅读

相关 vue 实现点击按钮加载更多

<template> <div> <div v-for="(item, key) in list" v-show="key<num">

梦里梦外;/ 2022年10月02日 00:49/ 0 赞/ 216 阅读

相关 angularjs实现点击加载更多

做个人博客时遇到这个需求，首先说下遇到难点： 1.动态插入指令，angular并不能正确渲染，而是以普通的html标签插入，也没有class=”ng-scope”，这与an

谁借莪１个温暖的怀抱￠/ 2022年07月27日 17:29/ 0 赞/ 184 阅读

相关 jquery列表点击加载更多

jquery列表点击加载更多，可点击多次 <!DOCTYPE html> <html> <head> <meta charset="utf-

￡神魔★判官ぃ/ 2022年06月17日 05:27/ 0 赞/ 184 阅读

相关 vue实现滚动条加载更多数据

原理： 1、参考线位置lineHeight：即判断滚动到何处触发事件； 2、页面卷入的高度scrollHeight； 3、浏览器窗口的高度windowHeig

Myth丶恋晨/ 2022年04月06日 05:56/ 0 赞/ 500 阅读

相关 vue点击展开更多，点击收起

<template> <div> <div class="menus"> <di

我不是女神ヾ/ 2022年03月21日 08:48/ 0 赞/ 464 阅读

相关 ajax实现点击加载更多

首先定义自己的文章结构 <div class="news"> <ul class="list"> <li

Bertha 。/ 2022年01月12日 02:49/ 0 赞/ 431 阅读

相关 vue 点击展开显示更多点击收起部分隐藏

vue 点击展开显示更多点击收起部分隐藏要求：只展示几条数据，其余的收起。点击显示更多时候，查看全部如下：以百度云的页面为例 ![在这里插入图片描述]

短命女/ 2021年09月13日 17:24/ 0 赞/ 780 阅读