当我尝试运行此 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>
输出将显示第一个项目前面有一个 1.，但第二个项目前面也有一个 1。
预期结果:
实际结果:
此外，请注意实际结果比实际结果更不紧凑，这是我不喜欢的。我们将不胜感激。
最佳答案
v-for根据您使用 v-for 的当前元素循环遍历元素。在你的情况下 - 你没有创建多个 <li>元素，但您创建了多个 <ol>元素。
您可以将代码更改为:
<ol id="shopping-list">
<li v-for="item of items">{{ item }}</li>
</ol>
关于javascript - li 元素标签中的数字不适用于 vue.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61021758/