科学健康资讯 · 内容仅供参考,不替代专业诊疗 联系我们|疾病百科
操作系统

arraypush(array push后数据不变)

2023-05-02 操作系统 本文链接

vue的列表渲染

1、用v-for把一个数组对应为一组元素

代码如下,可以遍历出数组的内容:

<ul id="example-1">

<li v-for="item in items" :key="item.message">

{{ item.message }} </li>

</ul>

var example1 = new Vue({

el: '#example-1',

data: { items: [ { message: 'Foo' },

{ message: 'Bar' } ] } })

也可以访问所有父作用域的property,还支持一个可选的第二个参数。

代码如下:

<ul id="example-2">

<li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>

var example2 = new Vue({

el: '#example-2', data: {

parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })

也可以使用of替代掉in

2、在v-for里使用对象

代码如下:

<ul id="v-for-object" class="demo">

<li v-for="value in object"> {{ value }}

</li> </ul>

new Vue({

el: '#v-for-object',

data: { object: {

title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } })

跑出来的效果,是遍历了title和author和publishedAt的内容。

可以使用第二个参数,跑出来的效果会有两个值,代码如下:

<div v-for="(value, name) in object">

{{ name }}: {{ value }}

</div>

跑出来的效果,name为title、author、publishedAt,value为具体对应的值。

3、维护状态

当vue正在使用v-for渲染元素列表时,默认使用“就地更新”策略,如果顺序改变,vue不会移动DOM元素匹配数据项的顺序,而是就地更新每个元素。

4、数据更新检测

使用以下方法时,会变更原始数组,具体方法如下:push(),pop(),shift(),unshift(),splice(),sort(),reverse()。

而下面几个数组不会更改原始数组,而是返回一个新数组。具体为filter()、concat() 和 slice()。

5、如果想要实现过滤或者排序,然后又不想更改到原始数组,可以使用计算属性,来返回过滤或者排序后的数组。

代码如下:

<li v-for="n in evenNumbers">{{ n }}</li>

data: {

numbers: [ 1, 2, 3, 4, 5 ] },

computed: { evenNumbers: function () {

return this.numbers.filter(function (number) { return number % 2 === 0 })

} }

在计算属性不适用的情况下,可以使用方法实现。

<ul v-for="set in sets"> <li v-for="n in even(set)">{{ n }}</li> </ul>

data: { sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]] },

methods: {

even: function (numbers) {

return numbers.filter(function (number) {

return number % 2 === 0 }) } }

6、v-for可以使用值范围

<div> <span v-for="n in 10">{{ n }} </span> </div>

7、在<template>上使用v-for,也可以使用。

8、不推荐v-for和v-if一同使用

本文内容仅供健康科普参考,不能替代专业医疗诊断和治疗建议。如有身体不适,请及时就医并遵从医师指导。

相关阅读