的js

Question

请在我的项目中，使用Vue.js，你需要提供一长串项目，以提高性能我想使用这样的工具： https://github.com/CatchLabs/vue-list-view

现在我尝试使用这个插件，提供我需要的东西。我的问题是我没有设法让它工作，因为当滚动列表显示为空。有没有人有这个插件或Vue Js可以帮助我的经验？

我的代码：

的js

var ListView = require('./vue-list-view/lib/list-view');

var myListView = ListView.default({
    template: '<div>{{ item.foo }}{{ item.bar }}</div>'
})

Vue.component('my-list-view', myListView)

new Vue({
    el: '#list',
    data: {
        myArr: [{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'}]
    }
})

HTML

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]-->

        <h4>Star</h4>
        <div id="list">
            <my-list-view :items="myArr"></my-list-view>
        </div>
        <h4>End</h4>

        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
        <script src="js/vue.min.js"></script>
        <script src="js/app.js"></script>

    </body>
</html>

但生成的列表为空。

Image example

非常感谢

Answer 1

您需要修复模板，添加prop：带数组的项目

 template: '<div :items="myArr" >{{ item.foo }}{{ item.bar }}</div>'

如何在Vue.js中使用list-view？

的js

HTML

1 个答案: