Vue | Vue.js基础模版语法(二)

最新推荐文章于 2024-06-06 11:48:43 发布

coderHing[专注前端]

最新推荐文章于 2024-06-06 11:48:43 发布

阅读量2k

点赞数 11

分类专栏：教你16天学会Vue 文章标签： javascript 前端 html vue.js es6

本文链接：https://blog.csdn.net/coderHing/article/details/127473259

版权

教你16天学会Vue 专栏收录该内容

16 篇文章 12 订阅

订阅专栏

本文详细介绍了Vue.js中v-for指令的使用，包括列表渲染、对象遍历及key属性的作用。同时，探讨了Vue如何处理数组更新检测，并解释了虚拟DOM和虚拟diff算法在提升性能上的关键作用。通过实例代码展示，帮助开发者深入理解Vue.js的核心概念。

摘要由CSDN通过智能技术生成

🖥️ Vue.js专栏：Vue.js 初级知识 | 模版语法(二)
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

一、v-for 列表渲染

列表渲染

从服务器拿到一组数据,并且需要对其进行渲染

这个时候我们可以使用v-for来完成

v-for类似于Js中的for循环可以用于遍历一遍数据

v-for基本使用

v-for的基本格式是"item in 数组":

数组通常来自 data或者 prop 也可以是其他方式

item是我们给每项元素起的别名,这个别名可以自定义

遍历数组的时候经常需要拿到数组的索引

需要索引可以使用格式: "(item,index) in 数组"

注意上面的顺序:数组元素项item是在前面的,索引项index是在后面的

JavaScript

<h2>电影列表</h2>
<ul>
<li v-for="movie in movies">{{movie}}</li>
</ul>

JavaScript

<ul>
<li v-for="(movie,index) in movies">{{index+1}}-{{movie}}</li>
</ul>

JavaScript

        <h2>商品列表</h2>
        
        <div class="item" v-for="{id,name,price,desc} in products">
            <h3 class="title">{{name}}</h3>
            <span>价格:{{price}}</span>
            <p>{{desc}}</p>
        </div>

二、v-for 渲染类型

v-for支持的类型

v-for支持遍历对象,且支持有一二三个参数

一个参数: "value in object";

两个参数: "(value,key) in object"

三个参数:"(value,key,index) in object"

V-for同时支持数字的遍历每个item都是一个数字也可以遍历其他的可迭代对象

JavaScript
<div id="app">
    

    
    <ul>
        <li v-for="(item,key,index) in info">{{item}}--{{key}}--{{index}}</li>
    </ul>

    
    <ul>
        <li v-for="item in message">{{item}}</li>
    </ul>

    
    <ul>
        
        <li v-for="item in 10">{{item}}</li>
    </ul>
</div>