您现在的位置是:群英 > 开发技术 > web开发
Vue的列表渲染怎样实现,方法是什么
Admin发表于 2022-11-12 17:41:50316 次浏览
这篇文章主要给大家介绍“Vue的列表渲染怎样实现,方法是什么”的相关知识,下文通过实际案例向大家展示操作过程,内容简单清晰,易于学习,有这方面学习需要的朋友可以参考,希望这篇“Vue的列表渲染怎样实现,方法是什么”文章能对大家有所帮助。

Vue的列表渲染

1.1.v-for

个人感觉其实就是基础语法的for循环,使用上也差不多,只是形式不同罢了,理解会使用。

使用方法;

1、遍历数组

v-for="item in 数组"
登录后复制
v-for="(item, index) in 数组"
登录后复制

对一个数组进行遍历实例:

<div class="item" v-for="item in products">
    <h3 class="title">商品:{{item.name}}</h3>
    <span>价格:{{item.price}}</span>
    <p>秒杀:{{item.desc}}</p>
</div>

const app = Vue.createApp({
        data() {
          return {
            //2.数组 存放的是对象
            products: [
              { id: 11, name: "mac", price: 1000, desc: "99" },
            ],
          };
        },
      });

app.mount("#app");
登录后复制

2、遍历对象
⭐⭐
v-for也支持遍历对象,并且支持有一二三个参数:

  • 一个参数: “value in object”;
  • 二个参数: “(value, key) in object”;
  • 三个参数: “(value, key, index) in object”;

v-for同时也支持数字的遍历:
每一个item都是一个数字;

<!-- 2.遍历对象 -->
      <ul>
        <li v-for="(value,key,index) in info">
          {{value}} - {{key}} - {{index}}
        </li>
      </ul>
 
 const app = Vue.createApp({
        data() {
          return {
            info: { bame: "why", age: 18, height: 1.88 },
          };
        },
      });
app.mount("#app");
登录后复制

3、遍历字符串

<li v-for="item in 100">{{item}}</li>
登录后复制

1.2.v-for和template

⭐⭐
我们可以使用templ元素来循环渲染一段包含多个元素的内容

为什么这里不使用div呢?

我之前学的时候也没有怎么考虑这个,整理笔记的时候发现了这个问题

原因

  • 如果是div包裹的话,div也会被渲染出来
  • 而使用template包裹的话,template并没有被渲染,相较于使用div会节省一个没有必要的div标签的使用。

其实,template的作用就是模板占位符,可以帮助我们包裹元素,在循环的过程总,template不会被渲染到页面上。

  • div(如果div没有实际的意义,那么可以使用template替换)

<div v-for="(value,key,index) in infos">
        <span>{{value}}</span>
        <strong>{{key}}</strong>
        <i>{{index}}</i>
</div>
登录后复制
  • template

<template v-for="(value,key,index) in infos">
        <span>{{value}}</span>
        <strong>{{key}}</strong>
        <i>{{index}}</i>
</template>
登录后复制

1.3.v-for 数组更新检测

⭐⭐

Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新

被包裹过的方法包括

  • push() 数组的后面插入元素
  • pop() 从数组后面删除一个元素
  • shift() 从数组前面删除一个元素
  • unshift() 从数组前面插入一个元素
  • splice() 数组的剪贴、插入、删除
  • sort() 排序
  • reverse() 反转

这些方法的用法其实在js中都是差不多的,用到的时候想起来再查查

替换数组的方法

  • 上面的方法会直接修改原来的数组;
  • 但是某些方法不会替换原来的数组,而是会生成新的数组,比如 filter()、concat() 和 slice();
//并不是完整写法!!!

<li v-for="item in names">{{item}}</li>
names: ["abc", "bac", "aaa", "cbb"],
// 1.直接将数组修改为一个新的数组
this.names = ["cc", "kk"];

// 2.通过一些数组的方法,修改数组中的元素
this.names.push("cc");
this.names.pop();
this.names.splice(2, 1, "cc");
this.names.sort();
this.names.reverse();

以上就是关于Vue的列表渲染怎样实现,方法是什么的介绍啦,需要的朋友可以参考上述内容,希望对大家有帮助,想要了解更多,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: Vue的列表渲染
相关信息推荐
2021-11-20 17:46:02 
摘要:这篇文章给大家分享的是python中如何取整数的内容,下文介绍了向下取整、向上取整、四舍五入取整和分别取整的方法,小编觉得挺实用的,因此分享给大家做个参考,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧。
2022-05-23 17:52:00 
摘要:下面由golang教程栏目给大家详解golang中方法的receiver为指针和不为指针的区别,希望对需要的朋友有所帮助!
2022-02-11 17:50:45 
摘要:这篇文章我们来了解Spring Cloud常见组件,这里主要给大家介绍七大组件,包括Eureka组件、Ribbon组件、Feign组件、Hystrix组件、Config组件、Zuul组件和Bus组件,文中简单的介绍了这七种组件及功能,有一定的学习参考价值,感兴趣的朋友就继续往下看吧。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部