gpt4 book ai didi

javascript - li 元素标签中的数字不适用于 vue.js

转载 作者:行者123 更新时间:2023-11-30 23:56:22 25 4
gpt4 key购买 nike

当我尝试运行此 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。

预期结果: The Expected Result

实际结果: The Actual Result

此外,请注意实际结果比实际结果更不紧凑,这是我不喜欢的。我们将不胜感激。

最佳答案

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com