image.png

代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js中v-for循环指令-对象数组的内容显示</title>
    <script src="//static.gzj2001.com/vue/vue.js"></script>
</head>

<body>
    <div id="app"><div v-for="item in produte">{{item.id}}-{{item.name}}--{{item.price}}</div></div>
    <script>
        new Vue({
            el: "#app",
            data: {
                produte: [
                    { id: "1", name: "allen1", price: 88 },
                    { id: "2", name: "22222", price: 8452 },
                    { id: "3", name: "allen4", price: 124 },
                ]
            }
        })
    </script>
</body>

</html>

效果展示

image.png