uni-app中使用列表渲染v-for

芷帆發表於 2021-7-9 09:47:00

<h3 id="在-v-for-里使用数组">在 v-for 里使用数组</h3>
v-for 指令可以实现基于一个数组来渲染一个列表。
<ul>
<li><code>v-for</code> 指令需要使用 <code>item in items</code> 形式的特殊语法，其中 <code>items</code> 是源数据数组，而 <code>item</code> 则是被迭代的数组元素的别名。
<ul>
<li>第一个参数 <code>item</code> 则是被迭代的数组元素的别名。</li>
<li>第二个参数，即当前项的索引 <code>index</code> ，是可选的。</li>
</ul>
</li>
</ul>
<div class="cnblogs_code">
<pre> <template>
 <view>
 <view v-for="(item, index) in items">
 {{ index }} - {{ item.message }}
 </view>
 </view>
</template>
<script>
 export default {
 data() {
 return {
 items: [
 { message: 'Foo' },
 { message: 'Bar' }
 ]
 }
 }
 }
</script></pre>
</div>
<h3 id="在-v-for-里使用对象">在 v-for 里使用对象</h3>
你也可以用 v-for 来遍历一个对象的 <code>property</code>。
<ul>
<li>第一个参数 <code>value</code> 是被迭代的对象元素的属性值。</li>
<li>第二个参数为 <code>property</code> 名称 (也就是键名)。</li>
<li>第三个参数作为索引。</li>
</ul>
<div class="cnblogs_code">
<pre> <template>
 <view>
 <view v-for="(value, name, index) in object">
 {{ index }}. {{ name }}: {{ value }}
 </view>
 </view>
</template>
<script>
 export default {
 data() {
 return {
 object: {
 title: 'How to do lists in Vue',
 author: 'Jane Doe',
 publishedAt: '2020-04-10'
 }
 }
 }
 }
</script></pre>
</div>
<h3 id="列表渲染分组">列表渲染分组</h3>
类似于 <code>v-if</code>，你也可以利用带有 <code>v-for</code> 的 <code>template</code> 来循环渲染一段包含多个元素的内容。比如：
<div class="cnblogs_code">
<pre> <template v-for="item in items">
 <view>{{ item.message }}</view>
 <view class="divider" role="presentation"></view>
</template></pre>
</div>
<h3 id="key">key</h3>
当 Vue 正在更新使用 <code>v-for</code> 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <code>input</code> 中的输入内容，<code>switch</code> 的选中状态），需要使用 <code>:key</code> 来指定列表中项目的唯一的标识符。
<code>:key</code> 的值以两种形式提供
<ul>
<li>使用 <code>v-for</code> 循环 <code>array</code> 中 <code>item</code> 的某个 <code>property</code>，该 <code>property</code> 的值需要是列表中唯一的字符串或数字，且不能动态改变。</li>
<li>使用 <code>v-for</code> 循环中 <code>item</code> 本身，这时需要 <code>item</code> 本身是一个唯一的字符串或者数字</li>
</ul>
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
<blockquote>
如不提供 :key，会报一个 <code>warning</code>，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
</blockquote>
示例：
<div class="cnblogs_code">
<pre> <template>
 <view>
 
 <view v-for="(item,index) in objectArray" :key="item.id">
 {{index +':'+ item.name}}
 </view>
 
 <view v-for="(item,index) in stringArray" :key="item">
 {{index +':'+ item}}
 </view>
 </view>
</template>
<script>
export default {
 data () {
 return {
 objectArray:[{
 id:0,
 name:'li ming'
 },{
 id:1,
 name:'wang peng'
 }],
 stringArray:['a','b','c']
 }
 }
}
</script></pre>
</div>
<h3 id="注意事项">注意事项</h3>
<ul>
<li>在H5平台使用 v-for 循环整数时和其他平台存在差异，如 <code>v-for="(item, index) in 10"</code> 中，在H5平台 item 从 1 开始，其他平台 item 从 0 开始，可使用第二个参数 index 来保持一致。</li>
<li>在非H5平台循环对象时不支持第三个参数，如 <code>v-for="(value, name, index) in object"</code> 中，index 参数是不支持的。</li>
<li>小程序端数据为差量更新方式，由于小程序不支持删除对象属性，使用的设置值为 null 的方式替代，导致遍历时可能出现不符合预期的情况，需要自行过滤一下值为 null 的数据（相关反馈）。</li>
</ul>
<h3 id="在组件上使用-v-for">在组件上使用 v-for</h3>
在自定义组件上，你可以像在任何普通元素上一样使用 <code>v-for</code> 。
<div class="cnblogs_code">
<pre><my-component v-for="item in items" :key="item.id"></my-component></pre>
</div>
当在组件上使用 v-for 时，key是必须的。
 
<code>uni-app</code> 支持在 template 模板中嵌套 <code><template/></code> 和 <code><block/></code>，用来进行 列表渲染 和 条件渲染。
<code><template/></code> 和 <code><block/></code> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
<code><block/></code> 在不同的平台表现存在一定差异，推荐统一使用 <code><template/></code>。
<div class="cnblogs_code">
<pre><template>
<view>
 <block v-for="(item,index) in list" :key="index">
 <view>{{item}} - {{index}}</view>
 </block>
</view>
</template></pre>
</div>
列表渲染同样推荐使用<template/> 
来源：https://www.cnblogs.com/twilight-sparkle/p/14989230.html

頁: [1]

琼殿技术论坛's Archiver

uni-app中使用列表渲染v-for