vue：列表渲染v-for

阿新 • • 發佈：2021-01-09

我們可以用 v-for 指令基於一個數組來渲染一個列表。 v-for指令需要使用”item in items “形式的特殊語法，其中items是源資料陣列，而item則是被迭代的陣列元素的別名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" 
>
    <title>購物車</title>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 宿主檔案 -->
    <!-- {{ mustache }}是一個動態的值 左右就用雙括號{{}}-->
    <!-- 插值文字 -->
    <!-- v-once執行一次性插值 之後值變了動態值不變 -->
    <div id= "app">
        < 
h2 :title="title">
            {{ title }}
            <!-- 列表渲染 -->
            
        </h2>
        <div v-for="c in courses" :key="c">
            {{ c }}
        </div>
    </div>
    <script>
        // 1.建立vue例項
        // 儲存vue例項 

        const app = new Vue({
            // 交代宿主是誰
            el:"#app",
            data: {
                title: '課程：',
                courses:["黃帝內經","仲景心法","鍼灸","傷寒","金匱"],
            }
        })
        
    </script>
</body>
</html>

在這裡插入圖片描述

vue：列表渲染v-for

我們可以用 v-for 指令基於一個數組來渲染一個列表。 v-for指令需要使用”item in items “形式的特殊語法，其中items是源資料陣列，而item則是被迭代的陣列元素的別名。

vue學習---列表渲染(v-for)

v-for指令: 1.用於展示列表資料 2.語法：v-for=\"(item, index) in xxx\" :key=\"yyy\" 3.可遍歷：陣列、物件、字串（用的很少）、指定次數（用的很少）

Vue（8）列表渲染v-for

迴圈在模板中可以用v-for指令來迴圈陣列，物件等。迴圈陣列我們可以用 v-for 指令基於一個數組來渲染一個列表。v-for 指令需要使用 item in items形式的特殊語法，其中 items 是源資料陣列，而 item 則是被迭代的

VUE學習十七，列表渲染v-for

一、我們可以用 v-for 指令基於一個數組來渲染一個列表。 <ul id=\"example-1\">

九、列表渲染v-for的使用

1、v-for指令，基於一個數組來渲染一個列表。（也可以基於一個物件）（注意：指令v-for，也可以被template標籤使用）

十一、列表渲染v-for與v-if一同使用效能優化技巧

1、當 v-for 與 v-if 一起使用時，v-for 的優先順序比 v-if更高。這意味著v-if分別重複執行於每個 v-for迴圈中。

vue選項卡，v-for迴圈資料列表，初始迴圈中的第一個為選中狀態class，點選改變class

css： .recharge_box{display: flex;padding: 0.1rem 0.1rem;justify-content: space-between;} .recharge{width: 2rem;height: 1rem;text-align: center;line-height: 1rem; border: 1px solid #eee;border-radiu