V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
loveuloveme
V2EX  ›  问与答

如何让 v-for 额外渲染的数据往下显示? 目前这一段代码,当数据超过一屏后,点击 Show More,新的内容会把原来的内容往上撑,而不是往下

  •  
  •   loveuloveme · 2020-10-05 15:21:40 +08:00 · 679 次点击
    这是一个创建于 1529 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <div id="ttt" style="padding-bottom:100px;border: 1px solid green">
            <div v-for="(comment, index) in comments">
                <div>
                    <p v-text="comment"></p>
                </div>
    
            </div>
            <button class="btn" @click="showMore">
                Show More
            </button>
        </div>
    
    <script>
        new Vue({
            el: '#ttt',
            data: {
                comments: ['tom', 'jack' ,'lily'],
            },
            methods: {
                showMore() {
                            this.comments = this.comments.concat(['mary', 'jessica'])
                        }
            },
        });
        </script>
    
    1 条回复    2020-10-05 23:38:24 +08:00
    IvanLi127
        1
    IvanLi127  
       2020-10-05 23:38:24 +08:00 via Android
    插入前记下滚动条位置,插完后滚立马回来。 css 有一个属性能控制,overflow-anchor 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3086 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 10:49 · PVG 18:49 · LAX 02:49 · JFK 05:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.