Javascript 如何使用vue js在容器中循环卡_Javascript_Vue.js_Vuejs2

Javascript 如何使用vue js在容器中循环卡

javascript vue.js vuejs2

Javascript 如何使用vue js在容器中循环卡,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我使用v-for指令来呈现基于数组的项目列表，但找不到任何方法来循环整个卡片内容。我正试着把这张卡片在整个容器中循环。如何在容器中循环此卡或col-md-4 multiple in，以及在循环卡期间更改数据 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></t

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

<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>


{{cardinfo[currentIdx].title}
{{cardinfo[currentIdx].details}
var dummyData=[{
标题：“这是博客标题”，
详细信息：“奥雷姆·伊普苏姆·多洛·西特·阿梅特，奉献精英。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨”，
图像：“https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&；自动=压缩&；cs=tinysrgb“，
}, {
标题：“这是博客标题2”，
详细信息：“阿兰齐·伊普苏姆·多洛尔坐在阿梅特，奉献精英。埃尼安·康莫多·利古拉·埃吉特·多洛尔。埃尼安·马萨”，
图像：“https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&；自动=压缩&；cs=tinysrgb“，
} {
标题：“这是博客标题3”，
详细信息：“mohim ipsum dolor sit amet，Concertetuer Adipising Elite.Aenean commodo ligula eget dolor.Aenean massa”，
图像：“https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&；自动=压缩&；cs=tinysrgb“，
}]
var app=新的Vue({
el:“#应用程序”，
数据：{
cardinfo:dummyData，
当前IDX:0
},
方法：{
}
})

我没有看到您使用v-for指令，也不需要像

{{cardinfo[currentIdx].details}}

这样使用模板

根据定义：

v-for指令，用于基于数组呈现项目列表。这个 v-for指令需要一种特殊语法，格式为 items，其中items是源数据数组，item是的别名正在迭代的数组元素

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

因此，有一种常见的v-for指令用法，如

v-for=“（项目，索引）in items”

。编码之前，您需要先阅读上述指南

PS:请注意：

以下是一个示例：

var dummyData=[{
标题：“这是博客标题”，
详细信息：“奥雷姆·伊普苏姆·多洛·西特·阿梅特，奉献精英。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨”，
图像：“https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&；自动=压缩&；cs=tinysrgb“，
}, {
标题：“这是博客标题2”，
详细信息：“阿兰齐·伊普苏姆·多洛尔坐在阿梅特，奉献精英。埃尼安·康莫多·利古拉·埃吉特·多洛尔。埃尼安·马萨”，
图像：“https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&；自动=压缩&；cs=tinysrgb“，
}, {
标题：“这是博客标题3”，
详细信息：“mohim ipsum dolor sit amet，Concertetuer Adipising Elite.Aenean commodo ligula eget dolor.Aenean massa”，
图像：“https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&；自动=压缩&；cs=tinysrgb“，
}]
var app=新的Vue({
el:“#应用程序”，
数据：{
cardinfos:dummyData，
当前IDX:0
},
方法：{
}
})


{{cardinfo.title}
{{cardinfo.details}