Vue中列表循环渲染

最新推荐文章于 2024-03-31 07:52:06 发布
最新推荐文章于 2024-03-31 07:52:06 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： Vue基础 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52207728/article/details/117468841
版权

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    list:['dell','huipu','asus']
                }
            },
            template:`
                <div v-for="item in list">{{item}}</div>
            `
        });


        const vm = app.mount('#root');
    </script>
</html>

上面代码中 <div v-for="item in list">{{item}}</div> 是核心代码，意思是通过循环，把list里面的内容一项一项循环展示到页面上面。

在上面<div v-for="item in list">{{item}}</div> 代码中循环可以有两个参数，即<div v-for="(item,index) in list">{{item}}---{{index}}</div> ,见index大家应该都明白是什么意思，就是下标，见代码：

        const app = Vue.createApp({
            data(){
                return {
                    list:['dell','huipu','asus']
                }
            },
            template:`
            <div v-for="(item,index) in list">{{item}}---{{index}}</div>
            `
        });


        const vm = app.mount('#root');

数组可以用v-for 对象也可以用v-for：

        const app = Vue.createApp({
            data(){
                return {
                    list:['dell','huipu','asus'],
                    firstObject:{
                        firstName:'alex',
                        secondName:'james',
                        job:'teacher'
                    }
                }
            },
            template:`
            <div v-for="(value in firstObject">{{value}}</div>
            `
        });


        const vm = app.mount('#root');

对于数组v-for就两个参数，第一个参数是值，第二个参数是下标，但对于对象而言，有三个参数，第一个参数是值，第二个是键，第三个是下标。

        const app = Vue.createApp({
            data(){
                return {
                    list:['dell','huipu','asus'],
                    firstObject:{
                        firstName:'alex',
                        secondName:'james',
                        job:'teacher'
                    }
                }
            },
            template:`
            <div v-for="(value,key,index) in firstObject">{{value}}---{{key}}---{{index}}</div>
            `
        });


        const vm = app.mount('#root');

v-for还可以循环数字：

        const app = Vue.createApp({
            template:`
            <div v-for="item in 10" >{{item}}</div>
            <button @click="handle">增加</button>
            `
        });


        const vm = app.mount('#root');

上面代码意思就是循环1到10之间的数字，将其渲染在页面上。

:key="index"
先看代码：

        const app = Vue.createApp({
            data(){
                return {
                    list:['dell','huipu','asus'],
                    firstObject:{
                        firstName:'alex',
                        secondName:'james',
                        job:'teacher'
                    }
                }
            },
            methods:{
                handle(){
                    this.list.push('hello');
                }
            },
            template:`
            <div v-for="(value,index) in list">{{value}}---{{index}}</div>
            <button @click="handle">增加</button>
            `
        });


        const vm = app.mount('#root');

上面代码就是每次点击button的时候页面就会新增一个hello，但每次之前有的就又会重新渲染一遍，这样就会比较浪费性能，但是用:key="index"就能提高一些性能，:key=""这里面尽量写一些不会重复的东西，比如在循环数组时用index，当加上这行代码时，再点击button时渲染页面时Vue底层发现以前的dom结构可以复用，所以就不会再重新渲染之前的dom，这样其实就是性能优化的一种体现。

        const app = Vue.createApp({
            data(){
                return {
                    list:['dell','huipu','asus'],
                    firstObject:{
                        firstName:'alex',
                        secondName:'james',
                        job:'teacher'
                    }
                }
            },
            methods:{
                handle(){
                    this.list.push('hello');
                }
            },
            template:`
            <div v-for="(value,index) in list" :key="index">{{value}}---{{index}}</div>
            <button @click="handle">增加</button>
            `
        });


        const vm = app.mount('#root');

总之，做循环的时候尽量给一个唯一的key值，能起到性能优化的效果。

后面就是数组数据和对象数据的变更的一些方法，一看就明白，跟原生JS没多大差别：

  const app = Vue.createApp({
    data() {
      return {
        listArray: ['dell', 'lee', 'teacher'],
        listObject: {
          firstName: 'dell',
          lastName: 'lee',
          job: 'teacher'
        }
      }
    },
    methods: {
      handleAddBtnClick() {
        // 1. 使用数组的变更函数 push, pop, shift, unshift, splice, sort, reverse
        // this.listArray.push('hello');
        // this.listArray.pop();
        // this.listArray.shift();
        // this.listArray.unshift('hello');
        // this.listArray.reverse();

        // 2. 直接替换数组
        // this.listArray = ['bye', 'world']
        // this.listArray = ['bye', 'wolrd'].filter(item => item === 'bye');

        // 3. 直接更新数组的内容
        // this.listArray[1] = 'hello'

        // 直接添加对象的内容，也可以自动的展示出来
        // this.listObject.age = 100;
        // this.listObject.sex = 'male';
      }
    },
    template: `
      <div>
        <div v-for="(value, key, index) in listObject" :key="index">{{value}}---{{key}}</div>
        <button @click="handleAddBtnClick">新增</button>
      </div>
    `
  });

  const vm = app.mount('#root');

循环和if的优先级：
在同一语句中，如果循环和if同时发生时循环的优先级要比if高，且if不会生效：

  const app = Vue.createApp({
    data() {
      return {
        listArray: ['dell', 'lee', 'teacher'],
        listObject: {
          firstName: 'dell',
          lastName: 'lee',
          job: 'teacher'
        }
      }
    },
    methods: {
      handleAddBtnClick() {
        // 1. 使用数组的变更函数 push, pop, shift, unshift, splice, sort, reverse
        // this.listArray.push('hello');
        // this.listArray.pop();
        // this.listArray.shift();
        // this.listArray.unshift('hello');
        // this.listArray.reverse();

        // 2. 直接替换数组
        // this.listArray = ['bye', 'world']
        // this.listArray = ['bye', 'wolrd'].filter(item => item === 'bye');

        // 3. 直接更新数组的内容
        // this.listArray[1] = 'hello'

        // 直接添加对象的内容，也可以自动的展示出来
        // this.listObject.age = 100;
        // this.listObject.sex = 'male';
      }
    },
    template: `
      <div>
        <div
          v-for="(value, key, index) in listObject"
          :key="index"
          v-if="key !== 'lastName'"
        >
            {{value}} -- {{key}}
        </div>
        <div v-for="item in 10">{{item}}</div>
        <button @click="handleAddBtnClick">新增</button>
      </div>
    `
  });

  const vm = app.mount('#root');

这里的v-if语句就不会生效。
但是如果必须要循环和判读的时候，可以像下面这样写（再包一层）：

  const app = Vue.createApp({
    data() {
      return {
        listArray: ['dell', 'lee', 'teacher'],
        listObject: {
          firstName: 'dell',
          lastName: 'lee',
          job: 'teacher'
        }
      }
    },
    methods: {
      handleAddBtnClick() {
      }
    },
    template: `
      <div>
        <div
          v-for="(value, key, index) in listObject"
          :key="index"
        >
            <div v-if="key !== 'lastName'">
                {{value}} -- {{key}}
            </div>
        </div>
        <div v-for="item in 10">{{item}}</div>
        <button @click="handleAddBtnClick">新增</button>
      </div>
    `
  });

  const vm = app.mount('#root');

再包一层div，将v-for和v-if分开在不同标签里。
不过上面的写法其实还是有一点小问题的，因为里面多包了一层，所以在展示的时候会多一层div标签，这样跟预期的结构还是有点区别的。（跟1 2 3 外边的结构是有区别的）
在这里插入图片描述
解决上面问题的方法就是使用template标签：

  const app = Vue.createApp({
    data() {
      return {
        listArray: ['dell', 'lee', 'teacher'],
        listObject: {
          firstName: 'dell',
          lastName: 'lee',
          job: 'teacher'
        }
      }
    },
    methods: {
      handleAddBtnClick() {
      }
    },
    template: `
      <div>
        <template
          v-for="(value, key, index) in listObject"
          :key="index"
        >
            <div v-if="key !== 'lastName'">
                {{value}} -- {{key}}
            </div>
        </template>
        <div v-for="item in 10">{{item}}</div>
        <button @click="handleAddBtnClick">新增</button>
      </div>
    `
  });

  const vm = app.mount('#root');

在这里插入图片描述
template就是一个占位符，它不会在html中展示。

凉风有信、
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue3基础学习笔记（二）Vue基础语法5-列表循环渲染
smellsummer的博客
07-06 387
新增
11~vue中列表渲染v-for
俗人世界
09-09 114
v-for遍历对象, 语法结构为: v-for="item in items", 其中特别注意, 必须加key,`key` 唯一标识, 快速找到`DOM`节点, 减少渲染次数, 提升渲染性能。
『VUE』06. 列表渲染（详细图文注释）
最新发布
MZH
03-31 810
『VUE』06. 列表渲染（详细图文注释）
vue的数组内对象交换位置后怎么重新渲染
Heby的博客
11-11 1095
交换数组内对象 1.[X,Y]=[Y,X] let list =[1,2,3,4] [list[1],list[2] ]=[list[2],list[1]] console.log(list)//[2,1,3,4] 2. 直接设置变量换 //用于交换前面和后面两个对象的 let a =list[i] list[i]=list[i+1] list[i+1]=a 重新渲染 //用于数组重新渲染 this.list=JSON.parse(JSON.stringify(this.list)) ..
Vue3.2+TS通过i18n实现国际化全流程，使用Vue3.2+TS+i18n来给大家实现一下项目的国际化，并且单独封装一个切换语种的组件，解决出现的bug
m0_56986233的博客
08-10 2636
Vue3.2+TS+Vite的国际化实现，并且解决了部分bug，封装了国际化切换组件
vue操作数组更新视图
agua001的博客
12-18 517
需求前提，后台对接接口，然后加收起展开功能，丢给我了，功能如图： 第一想到就是使用变量操作显隐，在不改动接口的情况下，自己手动给总数据添加了一个属性和属性值： this.tab1List.forEach((item) => { item.isShowData = false; }); this.tab1List[0].isShowData = true; // 需求是第一个数据默认展开，所以单独赋值了true <van-col span="6" v-show="item.isSh
在Vue 中实现循环渲染多个相同echarts图表
10-15
在Vue.js应用中，循环渲染多个相同的Echarts图表是一项常见的需求，这通常涉及到数据驱动视图的概念，即根据数据动态生成多个组件。以下是一个详细解释如何实现这一功能的方法： 首先，确保你已经在项目中安装了...
Vue列表页渲染优化详解
08-29
在列表渲染中，通过`v-if`或`v-show`控制元素的显示，可以避免渲染不需要的元素。如果某些列表项在初始渲染时就不应显示，使用`v-if`可以延迟它们的创建。 4. **使用`key`属性**： 在`v-for`循环中提供`key`属性...
基于vue循环列表时点击跳转页面的方法
10-18
今天小编就为大家分享一篇基于vue循环列表时点击跳转页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
实例分析vue循环列表动态数据的处理方法
10-17
在Vue.js框架中，动态数据绑定是其核心特性之一，尤其是在处理列表循环时，能够灵活地更新和操作数据显得尤为重要。本篇文章将深入探讨如何在Vue中处理循环列表的动态数据，通过实例分析帮助开发者更好地理解和应用...
vue中列表渲染相关知识(v-for)
qq_44998582的博客
01-13 1853
v-for动态渲染列表，实现列表关键字搜索以及列表排序，key的作用
[Vue]列表渲染
emmmm.....
10-09 2513
1. 列表渲染 1.1 v-for 1.2 v-for 中的索引 2. v-for 遍历数组 3. v-for 遍历对象 4. v-for 遍历字符串 5. v-for 遍历指定次数 6. key的作用与原理 6.1 key 6.2 key错误演示 6.2.1 index作为key 6.2.2 不写key 6.2.3 出现错误的解释 6.3 可以对数组数据进行唯一标识的作为key 6.3.1 示例 6.3.2 解释 6.4 key的作用 6.5 用index作为key可能会引发的问题 6.6 开发中如何选择
Vue中使用render渲染函数遇到的一个循环渲染的问题
艾恩
08-29 3168
渲染函数 最基础的渲染函数 new Vue({ el: '#app', render(h){ return h('div', 'hello world!'); } }); new Vue({ el: '#app', render(h){ return h({template: '<div>hello world!</div>'}); } }); Vue官方文档介绍中，说明了，createElement方法（h）的第一个参数可选值为
vue.js知识点总结（七）列表渲染
小公举的踩坑日记
11-30 2168
  1、用 v-for 把一个数组对应为一组元素,用 v-for指令根据一组数组的选项列表进行渲染，简单的说就是循环使用v-for。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。   用 v-f...
Vue列表渲染
qq_54334713的博客
06-20 1232
vue官方文档解读
vue中的列表渲染
weixin_46376652的博客
07-09 248
使用v-for实现循环遍历列表获取的每一个值循环列表中每一项的唯一值，可以是设置的唯一值(id)，也可以是索引值（1）使用变量p接收所遍历数组的每一个元素；（2）使用p和index接收所遍历数组的每一个元素和索引值； 使用value和key接收对象的数值和key 使用char和index接收字符串的字符和索引 1、vue实现代码转化为DOM的过程中，是先将代码转换为虚拟DOM，再将虚拟DOM转换为真实DOM；2、而将虚拟DOM转为真实DOM的过程中，会对比key相同的两个节点虚拟DO
vue技巧：多标签可点击、选中、样式变化
Shids_的博客
01-14 4648
vue技巧：多标签可点击、选中、样式变化
vue.js使用列表渲染的坑
github_38784600的博客
05-14 8974
关于vue.js你不得不了解的一个坑。不要等到踩进去了才后悔莫及。
table循环key vue_VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
weixin_34770855的博客
01-14 440
先看看ElementUI里关于el-table的template数据结构：:data="tableData"style="width: 100%">prop="date"label="日期"width="180">prop="name"label="姓名"width="180">prop="address"label="地址">再看看ElementUI里关于el-table...
在vue3里循环渲染颜色
06-02
在Vue3中循环渲染颜色可以使用v-for指令来循环遍历数据，然后在每个元素中使用v-bind指令绑定style属性来设置颜色。具体实现如下： 1. 在数据中定义需要循环的数据，例如： ``` data() { return { colors: ['red...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值