本篇文章带大家一起了解下Vue的列表渲染指令:v-for,希望给大家有所帮助!


(资料图片)

Vue的列表渲染

1.1.v-for

⭐⭐ 个人感觉其实就是基础语法的for循环,使用上也差不多,只是形式不同罢了,理解会使用。(学习视频分享:vue视频教程)

使用方法;

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

    登录后复制

    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();
    登录后复制

    【相关视频教程推荐:vuejs入门教程、web前端入门】

    以上就是浅析Vue的列表渲染指令:v-for的详细内容,更多请关注php中文网其它相关文章!

    推荐内容