现在我有一组数据,我想把它们都显示在页面上 .. 使用 Vue 的 v-for 这个指令可以很容易做到 ... 先在应用里添加一组数据 .. 放到它的 data 属性里面 .. 名字可以是 comments .. 表示评论 .. 它的值是一个数组,里面有一些项目 ... 每个项目都有一个 content 属性 .. 再设置一下对应的值 ... 然后再添加一条类似的数据 ...
回到我们的 html 文档 ... 添加一个 ol ,有序的列表 ... 每个列表项目用一下 li 标签包装一下 ... 现在我想把 comments 里的每个数据的 content 属性都放到这个 li 元素的里面 ..
在这个元素的上面,用一下 v-for 指令 ... comment in comments ... 意思就是循环的处理 comments 里面的数据,每次循环的时候,当前的项目的名字是 comment .. 在这个元素里,再用一个模板 ... 输出的内容是 comment 的 content 属性 ..
在页面上会显示应用里的 comments 里面的每个项目 ... 它们都会被一组 li 标签包装一下 ..
在控制台上,我们再往 comments 里面添加一个新的项目 ... app.comments.push ... 设置一下添加的这个项目 ... 在这个页面上会立即显示新添加进来的这个评论内容 ...