Vue的列表渲染指令v-for怎么使用

这篇文章主要介绍“Vue的列表渲染指令v-for怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue的列表渲染指令v-for怎么使用”文章能帮助大家解决问题。

创新互联公司成都网站建设按需定制，是成都网站维护公司,为门窗定制提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站设计热线：18982081108

Vue的列表渲染

1.1.v-for

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

使用方法;

1、遍历数组

v-for="item in 数组"

v-for="(item, index) in 数组"
对一个数组进行遍历实例：


    商品:{{item.name}}
    价格:{{item.price}}
    秒杀：{{item.desc}}



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都是一个数字；


      
        
          {{value}} - {{key}} - {{index}}
        
      
 
 const app = Vue.createApp({
        data() {
          return {
            info: { bame: "why", age: 18, height: 1.88 },
          };
        },
      });
app.mount("#app");

3、遍历字符串

{{item}}

1.2.v-for和template

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

为什么这里不使用div呢？

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

原因：

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

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

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


        {{value}}
        {{key}}
        {{index}}

template


        {{value}}
        {{key}}
        {{index}}

1.3.v-for 数组更新检测

⭐⭐

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

被包裹过的方法包括：

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

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

替换数组的方法

上面的方法会直接修改原来的数组；
但是某些方法不会替换原来的数组，而是会生成新的数组，比如 filter()、concat() 和 slice()；

//并不是完整写法！！！

{{item}}
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的列表渲染指令v-for怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。

网页名称：Vue的列表渲染指令v-for怎么使用
新闻来源：http://hbruida.cn/article/psphdh.html

Vue的列表渲染指令v-for怎么使用