Vue 响应式渲染 - 列表渲染

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue响应式渲染 - 列表渲染

目录

列表渲染

列表渲染介绍

数组遍历

对象的遍历

动态绑定key

总结


列表渲染

列表渲染介绍

(1)v-for (特殊v-for="n in 10")

A.in

B.of

没有区别

(2)key:

跟踪每个节点的身份,从而重用和重新排序现有元素

理想的key值是每项都有的且唯一的id。data.id

(3)数组更新检测

A.使用以下方法操作数组,可以检测变动

push() pop() shift() unshift() splice() sort() reverse()

B.filter() concat()和slice() map() 新数组替换旧数组

C.不能检测以下变动的数组

vm.items[indexOfitem] = newValue

解决

(1)Vue.set(example1.items, indexOfitem, newValue)

(2)splice

数组遍历

使用数组格式的数据源进行列表渲染。

示例如下:

html 复制代码
<script src="../lib/vue.js"></script>
    <div id="box">
        <ul>
            <li v-for="item of datalist">
                {
  
  {item}}
            </li>
        </ul>
        <ul>
            <li v-for="(item, index) of datalist">
                {
  
  {item}} -- {
  
  {index}}
            </li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el:'#box',
            data: {
                datalist:["11111", "2222", "3333"],
            }
        })
    </script>

效果如下:

对象的遍历

使用对象格式的数据源进行列表渲染。

示例如下:

html 复制代码
<script src="../lib/vue.js"></script>
    <div id="box">
        <ul>
            <li v-for="(item, index) in obj">
                {
  
  {item}} -- {
  
  {index}}
            </li>
        </ul>
        <ul>
            <li v-for="item in 10">
                {
  
  {item}}
            </li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el:'#box',
            data: {
              obj:{
                    name:"张三",
                    age:"20",
                    gender:"男"
                }
            }
        })
    </script>

效果如下:

动态绑定key

有一个唯一id属性,首先vue会根据列表创建虚拟dom,然后创建真实dom。

当列表修改后,vue会创建新的dom,然后通过用户设置的唯一id与原虚拟dom进行对比,

找不同,以最小的代价最后更新到真实dom树中。所以要设置合适的key。

示例如下:

html 复制代码
<ul>
    <li v-for="(item, index) in obj" :key="item.id">
        {
  
  {item}} -- {
  
  {index}}
    </li>
</ul>

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue响应式渲染 - 列表渲染

相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理6 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python