使用小胡子语法的另一种方法是使用v-text指令。 它将greeting设置为文本内容。
v-text
greeting
<ul> <li v-for="greeting in greetings" v-text=greeting></li> </ul>
将呈现相同的结果。
让我们沿着存储通道走一下。 我们了解到 Vue 的美丽在于其反应性。
快速回顾： 使状态和视图保持同步。 换句话说，Vue 不仅在引用的 DOM 中将呈现为数据，而且无论何时在数据对象中更改其值，都会更新。
让我们再来看一次这种情况。
使用快捷方式 F12 打开 Chrome DevTools ，然后点击“ Vue ”。 仅当您已遵循我们的教程系列并安装了 Vue Devtools Chrome 扩展后，此面板才会出现。
由于我们没有使用任何全局变量来引用index.js文件中的 Vue 实例，因此默认情况下会将其保存到$vm0。 如下图所示，单击<Root>即可看到。 因此，让我们使用$vm0从开发者工具控制台访问 Vue 模型。
index.js
$vm0
<Root>
让我们转到控制台，使用push方法向greetings数组添加一个问候，然后查看视图是否进行了动态更新（神奇地！）。
push
greetings
$vm0.greetings.push("namaste")
这不是魔术吗？
开发者的生活没有暂停按钮！ 我们期望完成意外的事情，例如访问数组项的索引及其内容。 我们知道如何使用 Vue 渲染数组元素，但是否也可以获得其索引？ 好吧，答案是肯定的！
语法与我们之前看到的非常相似，
<div v-for="(greeting, index) in greetings">{{ index }}. {{ greeting}}</div>
我们必须引入一个括号并指定两个用逗号分隔的参数，可以选择它们的名称。 第一个参数是指数组元素 – 在我们的例子中是greeting。 第二个参数是可选的，它引用当前正在循环的项目的索引 – 在我们的示例中为index。 此订单是最重要的注意事项。 无论您使用什么名称，第一个始终是数组元素，第二个始终是 v-for 语法中的索引。 然后可以根据需要将其与代码中的这些名称一起使用。
index
让我们看一下最终代码。
<!DOCTYPE html> <html> <head> <title>Hello Vue!</title> <!-- including Vue with development version CDN --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Greetings</h2> <!-- Iterating through array elements--> <ul> <li v-for="greeting in greetings" v-text=greeting></li> </ul> <!-- Accessing array elements along with thier index --> <h2>Greetings with Index</h2> <div v-for="(greeting, index) in greetings"> {{ index }}. {{ greeting}} </div> </div> <!-- including index.js file --> <script src="index.js"></script> </body> </html>
var app = new Vue({ el: "#app", data: { greetings: ["hi", "bonjour", "hola", "ciao"] } });
GitHub 存储库中也提供了上面讨论的所有代码。 随意分叉存储库并进行一些实验。
在下一篇文章中，我们将研究如何使用 v-for 遍历对象。 在此之前，请继续练习！
