li 元素標簽中的數字不適用於 vue.js

Question

當我嘗試運行這個 vue 代碼時，

<!DOCTYPE html>
<html>
    <head>
        <title>My first Vue app</title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="shopping-list">
            <ol id="shopping-list" v-for="item of items">
                <li>{{ item }}</li>
            </ol>
        </div>
        <script>
            var app = new Vue({
              el: "#shopping-list",
              data: {
                items: ["VR Headset", "Some Games"]
              }
            });
        </script>
    </body>
</html>

output 將顯示第一項前面有一個 1，但第二項前面也有一個。

預期結果：

實際結果：

另外，請注意實際結果如何不如實際結果緊湊，這是我不喜歡的。 幫助將不勝感激。

Answer 1

v-for根據您啟用 v-for 的當前元素循環遍歷元素。 在您的情況下 - 您沒有創建多個<li>元素，而是創建了多個<ol>元素。

您可以將代碼更改為此：

<ol id="shopping-list">
    <li v-for="item of items">{{ item }}</li>
</ol>

li 元素標簽中的數字不適用於 vue.js

問題描述

1 個解決方案

解決方案1
2 已采納 2020-04-03 23:18:03

li 元素標簽中的數字不適用於 vue.js

問題描述

1 個解決方案

解決方案1 2 已采納 2020-04-03 23:18:03

解決方案1
2 已采納 2020-04-03 23:18:03