Vue 中的列表渲染

2019-02-11 admin

列表渲染

<div id="app">
    <div v-for="(item,index) of list" :key="index">
        {{item}} ---- {{index}}
    </div>
</div>
let vm = new Vue({
    el: '#app',
    data: {
        list: [
            "hello","Dell","nice","to","meet","you"
        ]
    }
})

上面是一个最基础的列表渲染,在实际开发中,还有很多细节点,为了提升循环的性能,会给循环项加一个唯一的key。我们可以用index作为唯一的key值。

其实不推荐大家这样使用index的,因为这样使用index作为key值,在你频繁操作dom元素时,会比较费性能,无法充分让 Vue 复用dom

key

不用index作为key值,那用什么作为key呢?一般来说每个数据都有唯一的一个id,用它来作为key值就行了。

如下:

<div id="app">
    <div v-for="(item,index) of list" 
        :key="item.id">       //key 值就没有必要使用 index
        {{item.text}} ---- {{index}}
    </div>
</div>
let vm = new Vue({
    el: '#app',
    data: {
        list: [
            {id: 1, text: 'hello'},
            {id: 2, text: 'Dell'},
            {id: 3, text: 'Lee'}
        ]
    }
})

列表提高性能,要在每一项上带一个key值,key值要唯一,且最好不要用indexkey值。

往列表项添加内容

往列表项里面添加内容,只需使用push语法就可以了。

vm.list.push({id: 4,text: 'I am tiantian'})

有时候会这样写

vm.list[4] = {id: 4,text: 'I am tiantian'}

这样写其实是有问题的,列表虽然更新了,但是页面却没有更新。这是为什么呢?

当我们尝试修改数组内容的时候,不能通过下标的形式来改变这个数组,我们只能通过Vue 提供的几个数组变异方法,来操作数组,才能够实现,数据发生变化,页面也能发生变化这种效果。

Vue 提供了七种数据变异方法,分别是:pushpopshiftunshiftsplicesortreverse

改变引用

除了使用变异方法,我们还能使用其他方法吗?改变数据的引用

vm.list = [
    {id: 1, text: 'hello'},
    {id: 2, text: 'Dell'},
    {id: 3, text: 'Lee'},
    {id: 4, text: 'I am tiantian'},
]

这时候你会发现,数据变了,页面也会跟着重新渲染。

循环多项

如果还有一个元素需要循环,在写一层循环的话,性能肯定会有影响。

<div id="app">
    <div v-for="(item,index) of list" 
        :key="item.id">
        {{item.text}} ---- {{index}}
    </div>
    <span v-for="(item,index) of list" 
        :key="item.id">
        {{item.text}}
    </span>
</div>
let vm = new Vue({
    el: '#app',
    data: {
        list: [
            {id: 1, text: 'hello'},
            {id: 2, text: 'Dell'},
            {id: 3, text: 'Lee'}
        ]
    }
})

很容易就想到,那么我在外面加一层div不就行了。

<div id="app">
    <div v-for="(item,index) of list" 
        :key="item.id">
        <div>
            {{item.text}} ---- {{index}}
        </div>
        <span>
            {{item.text}}
        </span>
    </div>
</div>
let vm = new Vue({
    el: '#app',
    data: {
        list: [
            {id: 1, text: 'hello'},
            {id: 2, text: 'Dell'},
            {id: 3, text: 'Lee'}
        ]
    }
})

这两段代码的区别是,用template渲染的,最外层没有div,而上面一段,最外层会有一个div

<div id="app">
    <template v-for="(item,index) of list" 
        :key="item.id">
        <div>
            {{item.text}} ---- {{index}}
        </div>
        <span>
            {{item.text}}
        </span>
    </template>
</div>
let vm = new Vue({
    el: '#app',
    data: {
        list: [
            {id: 1, text: 'hello'},
            {id: 2, text: 'Dell'},
            {id: 3, text: 'Lee'}
        ]
    }
})

对象中的set方法

对象的循环和数组一样,可以通过改变引用方式,更新数据。

除了这种方式之外,那我们还有其他方法更新数据吗?

全局方法:Vue.set()

let vm = new Vue({
    el: '#app',
    data: {
        userInfo: {
            name: 'tiantain',
            age: 28,
            gender: 'male',
            salary: 'secrey'
        }
    }
})
Vue.set(vm.userInfo,'address','beijing')    //通过 Vue 提供的 set 方法,可以实现,数据更新,页面更着更新。

除了直接改变数据的引用,还可以利用 Vue 提供的set方法去改变数据

实例方法:vm.$set()

vm.$set(vm.userInfo,'address','beijing')    //通过 Vue 提供的 set 方法,可以实现,数据更新,页面更着更新。

如果useriInfo是个数组,也可以使用set方法

全局方法:

let vm = new Vue({
    el: '#app',
    data: {
        userInfo: [1,2,3,4]
    }
})
Vue.set(vm.userInfo,2,44)

实例方法:

vm.$set(vm.userInfo,2,44)

原文链接:https://segmentfault.com/a/1190000018120299

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53538.html

文章标题:Vue 中的列表渲染

相关文章
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: &lt;span style=&quot;font-size:14px;&quot;&gt; &lt;HTML&gt; &lt...
2017-03-06
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
javascript中的switch语句
switch语句:该语句对表达求值结果和case的值进行比较。如果找到匹配,则程序执行的与该case关联的语句。break为可选参数,通常使用break阻止代码向下一个case执行。switch语句如下: switch (expressio...
2015-11-12
JavaScript将字符串转换成字符编码列表的方法
本文实例讲述了JavaScript将字符串转换成字符编码列表的方法。分享给大家供大家参考。具体如下: JavaScript将字符串转换成字符编码列表,例如foo转换成 [112,111,111] 方法 1: JavaScript 1.6 A...
2017-03-21
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
Javascript实现数组中的元素上下移动
交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候,要实现一个数组记录上下移动的示例。写起来也没有没麻烦,无非是交换数组元素。最终实现代...
2017-05-02
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
回到顶部