企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[TOC] ## 用法: > 基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名: > items 是源数据数组并且 > item 是数组元素迭代的别名。 ``` <div v-for="item in items"> {{ item.text }} </div> ``` > v-for 默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 key 的特殊属性: ``` <div v-for="item in items" :key="item.id"> {{ item.text }} </div> ``` ## 例子 ``` div id="test"> <ul> <li v-for="food in foodList">{{food.name}}:${{food.price}}</li> </ul> </div> <script> var app = new Vue({ el:"#test", data:{ // foodList:['苹果','香蕉','梨'], foodList:[ { name:'苹果', price:8 }, { name:'香蕉', price:4.5 }, { name:'梨', price:6 } ] } }) </script> ```