Vue-列表渲染

已于 2024-09-09 22:37:17 修改
阅读量507 收藏 6
点赞数 9
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2024-09-09 18:31:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63563047/article/details/142064537
版权

基本列表渲染

v-for指令:

1.用于展示列表数据

2.语法：v-for="(item, index) in xxx",key="yyy"

  • item: 这是当前迭代的对象或数组元素。在每次循环中，item 将代表 对象或数组中的一个元素。
  • index: 这是当前元素在数组或对象中的索引值
  • key: key 是一个特殊的属性，用于帮助 Vue 跟踪每个节点的身份，以便在更新时能够高效地重新渲染。key 的值通常是一个唯一的标识符，通常使用 item 的某个属性（如 item.id）或 index 来确保每个元素都有一个唯一的 key 值。

3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

基本列表渲染示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript" src="./js/vue.js"></script>
    <div id="app">
        <!-- 遍历数组 -->
         <h3>遍历数组</h3>
        <ul>
            <li  v-for="(item,index) in drugList" :key="index">{{item.name}}-{{item.productionTime}}</li>
        </ul>
        <!-- 遍历对象 -->
         <h3>遍历对象</h3>
        <ul>
            <li v-for="(item,index) in drugInfo">{{index}}-{{item}}</li>
        </ul>
        <!-- 遍历字符串 -->
        <h3>遍历字符串</h3>
        <ul>
            <li v-for="(item,index) in str">{{index}}-{{item}}</li>
        </ul>
        <!-- 遍历指定次数 -->
        <h3>遍历指定次数</h3>
        <ul>
			<li v-for="(number,index) of 5" :key="index">
				{{index}}-{{number}}
			</li>
		</ul>
    </div>

    <script>
        Vue.config.productionTip = false
        Vue.config.devtools = true
        new Vue({
            el:'#app',
            data:{
                drugList:[
                    {id:'01',name:'999感冒灵',productionTime:'20240102'},
                    {id:'02',name:'小柴胡颗粒',productionTime:'20240303'},
                    {id:'03',name:'板蓝根',productionTime:'20240207'},
                    {id:'04',name:'云南白药',productionTime:'20240405'},
                ],
                drugInfo:{
                    name:'云南白药',
                    effictive:'治跌打损伤及创伤创伤'
                },
                str:'abcdefg',
            },
        })
    </script>
</body>

</html>

运行结果：

 key的作用与原理

Vue 中的 key 值主要是供 Vue 内部使用的。它用于帮助 Vue 跟踪每个节点的身份，以便在更新时能够高效地重新渲染组件。

1. 虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2.对比规则：

  (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

  • 若虚拟DOM中内容没变, 直接使用之前的真实DOM！
  • 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

  (2).旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。

3.用index作为key可能会引发的问题：

  • 若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
  • 如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。

4. 开发中如何选择key?:

  • 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
  • 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript" src="./js/vue.js"></script>
    <div id="app">
        <button @click.once="addDrug">再添加一个药物</button>
        <ul>
            <li  v-for="(item,index) in drugList" :key="index">
                {{item.name}}-{{item.productionTime}}
                <input type="text">
            </li>
        </ul>
    <script>
        Vue.config.productionTip = false
        Vue.config.devtools = true
        new Vue({
            el:'#app',
            data:{
                drugList:[
                    {id:'01',name:'999感冒灵',productionTime:'20240102'},
                    {id:'02',name:'小柴胡颗粒',productionTime:'20240303'},
                    {id:'03',name:'板蓝根',productionTime:'20240207'},
                    {id:'04',name:'云南白药',productionTime:'20240405'},
                ],
            },
            methods: {
                addDrug(){
                    const drugInfo = {
                        id:'05',name:'连花清瘟胶囊',productionTime:'20240607'
                    }
                    this.drugList.unshift(drugInfo)
                }
            },
        })
    </script>
</body>

</html>

这里用index作为key值，点击再添加一个药物后，这里会引发顺序不一致的问题。

 列表过滤

以下是分别使用计算属性和监视属性实现的列表过滤案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript" src="./js/vue.js"></script>
    <div id="app">
        <input type="text" placeholder="请输入药品信息" v-model="keyWord">
        <ul>
            <li v-for="(item,index) in filDrugList" :key="index">
                {{item.name}}-{{item.productionTime}}
            </li>
        </ul>
    </div>
</body>

<script>
    Vue.config.productionTip = false
    Vue.config.devtools = true

    //watch实现列表过滤
    /*  new Vue({
          el:'#app',
          data:{
              keyWord:'',
              drugList:[
                      {id:'01',name:'999感冒灵',productionTime:'20240102'},
                      {id:'02',name:'小柴胡颗粒',productionTime:'20240303'},
                      {id:'03',name:'板蓝根',productionTime:'20240207'},
                      {id:'04',name:'云南白药',productionTime:'20240405'},
                  ],
              filDrugList:[],
          },
          watch:{
               keyWord:{
                  immediate:true,
                  handler(newValue){
                      this.filDrugList = this.drugList.filter((item)=>{
                      return item.name.indexOf(newValue) !== -1
                  })
                  }
               
               }
          }
      })    */
    //computed实现列表过滤
    new Vue({
        el: '#app',
        data: {
            keyWord: '',
            drugList: [
                { id: '01', name: '999感冒灵', productionTime: '20240102' },
                { id: '02', name: '小柴胡颗粒', productionTime: '20240303' },
                { id: '03', name: '板蓝根', productionTime: '20240207' },
                { id: '04', name: '云南白药', productionTime: '20240405' },
            ],
        },
        computed:{
            filDrugList(){
                return this.drugList.filter((item)=>{
                    return item.name.indexOf(this.keyWord) !== -1
                })
            }
        }
    })
</script>

</html>

列表排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="./js/vue.js"></script>
    <div id="app">
        <input type="text" placeholder="请输入药品信息" v-model="keyWord">
        <button @click="sortType=2">生产日期升序</button>
        <button @click="sortType=1">生产日期降序</button>
        <button @click="sortType=0">生产日期原序</button>
        <ul>
            <li v-for="(item,index) in filDrugList" :key="index">
                {{item.name}}-{{item.productionTime}}
            </li>
        </ul>
    </div>
</body>

<script>
    Vue.config.productionTip = false
    Vue.config.devtools = true
    new Vue({
        el:'#app',
        data:{
            keyWord:'',
            sortType:0,
            drugList:[
                    {id:'01',name:'999感冒灵',productionTime:'20240102'},
                    {id:'02',name:'小柴胡颗粒',productionTime:'20240303'},
                    {id:'03',name:'板蓝根',productionTime:'20240207'},
                    {id:'04',name:'云南白药',productionTime:'20240405'},
                ],
        },
        computed:{
                     filDrugList(){
                        const arr = this.drugList.filter((item)=>{
                            return item.name.indexOf(this.keyWord)!==-1
                        })
                        if(this.sortType){
                            arr.sort((item1,item2)=>{
                                return this.sortType === 1?item2.productionTime-item1.productionTime:item1.productionTime-item2.productionTime
                            })
                        }
                        return arr
                     }
            }
     
    })    
</script>

</html>

列表更新时的一个问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="./js/vue.js"></script>
    <div id="app">
        <button @click="updateDrugInfo">更新云南白药的信息</button>
        <ul>
            <li v-for="(item,index) in drugList" :key="index">
                {{item.name}}-{{item.productionTime}}
            </li>
        </ul>
    </div>
</body>

<script>
    Vue.config.productionTip = false
    Vue.config.devtools = true
    new Vue({
        el:'#app',
        data:{
            keyWord:'',
            sortType:0,
            drugList:[
                    {id:'01',name:'999感冒灵',productionTime:'20240102'},
                    {id:'02',name:'小柴胡颗粒',productionTime:'20240303'},
                    {id:'03',name:'板蓝根',productionTime:'20240207'},
                    {id:'04',name:'云南白药',productionTime:'20240405'},
                ],
        },
        methods: {
				updateDrugInfo(){
					this.drugList[3].name = '连花清瘟胶囊' //奏效
					this.drugList[3].productionTime = '20240608' //奏效
					this.drugList[3] = {id:'04',name:'连花清瘟胶囊',productionTime:'20240608'} //不奏效
					this.drugList.splice(0,1,{id:'04',name:'连花清瘟胶囊',productionTime:'20240608'})
				}
			}
   
     
    })    
</script>

</html>

殊序
关注
专栏目录
vue-列表渲染(v-for 详细)
meng的博客
09-09 9734
v-for 1、数组 用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组。 运行效果： 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key属性。 动态改变数组的值，触发视图更新： vm.newsList[0].title = "会渲染到视图中"; 可以通过索引的方式来动态的改变数组当中的数据，并且能够渲染到视图中，但是现在这个索引0是此数组中本
Vue---列表渲染
gaoqiandr的博客
05-12 2217
本文主要介绍Vue中的列表渲染的基本用法
Vue----列表渲染指令
emmmm.....
04-29 1510
文章目录3.9 列表渲染指令3.9.1 v-for 中的索引3.9.2 使用 key 维护列表的状态3.9.3 key 的注意事项 3.9 列表渲染指令 vue 提供了 v-for 指令，用来辅助开发者基于一个数组来循环渲染相似的 UI 结构。 v-for 指令需要使用item in items 的特殊语法，其中： items 是待循环的数组 item 是当前的循环项 3.9.1 v-for 中的索引 v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index)
Vue - 列表渲染（Template v-for）
一片天空
08-13 4980
如同 v-if 模板，你也可以用带有v-for的<template>标签来渲染多个元素块。例如： <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template> </ul> ...
vue-列表的渲染
sharp0016的博客
02-02 1529
** vue-列表的渲染 ** vue的列表渲染指令是基于v-for的，官方文档中是这么说的*v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。*便于理解：对于v-for他就必须使用一种特殊的语法，item in items items代表的是数据中的数组，而我们说的这些item代表的就是其中的每一项。并且在v-for中，我们拥有一个权力，可以说这个权力比什么都大，就是说对于父作用域完全访问的权力。 <li
vue-better-list-view:vue长列表按需渲染
05-18
vue长列表按需渲染， 使用 提供npm版本和umd版本 npm 安装 // install npm i vue-better-list-view --save-dev // in your project import listView from 'vue-better-list-view' 或 umd 引入 [removed][removed] ...
vue3.0 vue-quill-editor.rar
09-19
Vue3.0还引入了Teleport，它允许我们将DOM元素渲染到页面上的特定位置，极大地扩展了模板的布局可能性。 Vue-Quill-Editor是一款基于Quill的 Vue.js 富文本编辑器组件，提供了丰富的文本格式化选项，如字体、字号、...
Vue-Gantt-chart:使用Vue做数据控制的Gantt图表
08-05
vue-gantt-chart 基于 Vue 实现的 gantt-like 图表 ,用于...虚拟列表，快速渲染可视区域，支持大量数据渲染 可变时间轴，1 分钟，2 分钟，3 分钟，4 分钟~~~到一天 可变单元格 标记线 支持自定义描述和容器块 Screen
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 381
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
Vue Router push方法的使用
ithongchou的博客
09-13 701
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
element-plus组件问题汇总
xiaoxian_xian的博客
09-12 387
element-plus组件问题汇总
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 526
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
大文件切片上传-vue3.0
m0_56416159的博客
09-12 523
大文件切片上传（也称为分片上传）是一种处理大文件上传的有效方法，它通过将大文件分割成多个较小的部分（即切片或分片），然后分别上传这些切片到服务器，最后在服务器上将这些切片合并成原始文件。以下是关于大文件切片上传的详细步骤和注意事项。onUploadInit： 文件初始化调用接口，用于后端创建存放切片文件的文件夹。SparkMD5：生成文件唯一的hash，用来验证文件的完整性。onUploadFinish：文件上传完成验证完整性的接口。onUploadChunk：分片上传接口。基于vue3.0代码实现。
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
qq_60281421的博客
09-11 515
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
vue3 透传 Attributes
咸鱼滚滚
09-15 652
“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。 当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。 最常见的例子就是 class、style 和 id。
vue3前端tab切换
susu1083018911的博客
09-12 453
vue3前端tab切换
考研助手|基于SSM＋vue的考研助手系统的设计与实现(源码+数据库+文档)
weixin_66413741的博客
09-12 778
考研助手|考研网站|考研平台|考研管理系统|考研助手网站能够通过互联网得到广泛的、全面的宣传，让尽可能多的用户了解和熟知考研助手网站的便捷高效，不仅为群众提供了服务，而且也推广了自己，让更多的群众了解自己。对于考研助手而言，若拥有自己的系统，通过系统得到更好的管理，同时提升了形象。 本系统设计的现状和趋势，从需求、结构、数据库等方面的设计到系统的实现，分别为管理员，教学秘书和学生的实现。论文的内容从系统的设计、描述、实现、分析、测试方面来表明开发的过程。本系统根据现实情况来选择一种可行的开发方案，借助ja
VUE
最新发布
qq_64633597的博客
09-16 212
变更方法：push() pop() shift() unshift() splice() sort() reverse()与方法的区别：计算属性仅在响应式更新时才会重新计算，方法调用总是在重渲染发生时再次执行。一般将vue组件单独构建在一个单独的vue文件中，这就是SFC 单文件组件。.lazy number：只接受数字格式 trim：取消空格。替换数组：filter() concat() slice()定义在父中，只能由父进行修改，若无值，可在子类中指定默认值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值