Question

我使用v-for指令根据数组呈现项目列表，但找不到任何方法来循环整个卡片内容。我试图在整个容器中循环这张卡。如何在容器中循环使用此卡或col-md-4，也可以在循环卡片期间更改数据。

<html>
<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 href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://the-allstars.com/vue2-animate/dist/vue2-animate.css">
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">

                    <div class="card text-center">
                        <img class="card-img-top" :src="cardinfo[currentIdx].image" alt="" width="100%">
                        <div class="card-block">
                            <h4 class="card-title">{{ cardinfo[currentIdx].title }}</h4>
                            <p class="card-text">{{ cardinfo[currentIdx].details }}</p>
                            <a class="btn btn-primary" href="#">Read More</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- vue code start from here -->
    <script>
        var dummyData = [{
            title: "This is the blog title",
            details: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa",
            image: "https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&amp;auto=compress&amp;cs=tinysrgb",
        }, {
            title: "This is the blog title2",
            details: "alrazy ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa",
            image: "https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&amp;auto=compress&amp;cs=tinysrgb",
        } {
            title: "This is the blog title3",
            details: "mohim ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa",
            image: "https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&amp;auto=compress&amp;cs=tinysrgb",
        }]
        var app = new Vue({
            el: '#app',
            data: {
                cardinfo: dummyData,
                currentIdx: 0
            },
            methods: {


            }

        })
    </script>
</body>

</html>

Answer 1

我没有看到您使用v-for指令，并且您不需要使用{{ cardinfo[currentIdx].details }}之类的模板。

由Vue Official Guide定义：

v-for指令，用于根据数组呈现项目列表。该   v-for指令需要item中的特殊语法   items，其中items是源数据数组，item是别名   正在迭代的数组元素

在v-for块内部，我们可以完全访问父作用域属性。   v-for还支持索引的可选第二个参数   当前项目

这是一个常见的v-for指令用法，如v-for="(item, index) in items"。在编码之前，您需要先阅读上述指南。

PS：关注Key：

以下是一个示例：

＆＃13;

var dummyData = [{
    title: "This is the blog title",
    details: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa",
    image: "https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&amp;auto=compress&amp;cs=tinysrgb",
}, {
    title: "This is the blog title2",
    details: "alrazy ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa",
    image: "https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&amp;auto=compress&amp;cs=tinysrgb",
}, {
    title: "This is the blog title3",
    details: "mohim ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa",
    image: "https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&amp;auto=compress&amp;cs=tinysrgb",
}]

var app = new Vue({
    el: '#app',
    data: {
        cardinfos: dummyData,
        currentIdx: 0
    },
    methods: {


    }

})

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://the-allstars.com/vue2-animate/dist/vue2-animate.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" v-for="(cardinfo, index) in cardinfos" :key="index">

                <div class="card text-center">
                    <img class="card-img-top" :src="cardinfo.image" alt="" width="100%">
                    <div class="card-block">
                        <h4 class="card-title">{{ cardinfo.title }}</h4>
                        <p class="card-text">{{ cardinfo.details }}</p>
                        <a class="btn btn-primary" href="#">Read More</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

＆＃13;

如何使用vue js将卡循环到容器中

1 个答案: