Vue.js03之常用标签v-for,v-if,v-show

最新推荐文章于 2024-07-19 10:04:44 发布

autumn-leaf

最新推荐文章于 2024-07-19 10:04:44 发布

阅读量1.7k

点赞数 1

分类专栏： Vue.js Vue.js 文章标签： v-for v-if v-show

本文链接：https://blog.csdn.net/chenpeixing361/article/details/88916964

版权

本文深入讲解Vue.js的v-for指令，包括遍历数组、对象、数字及其key属性的使用。同时，对比分析了v-if和v-show在条件渲染中的差异和应用场景。

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

相信大家看了我的前面两次博客关于Vue.js相关的讲解之后，应该对Vue.js了解了一些基础知识了。本次将会继续讲解Vue.js常用的指令v-for,v-if和v-show。

v-for

我们用 v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用 item in items形式的特殊语法，item是源数据数组并且item是数组元素迭代的别名。

接下来我们上一段代码进行详细的介绍，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for的使用</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-for遍历循环普通数组 -->
        <p v-for="item in list">{
  { item }}</p>
        <!-- 可以索引数组下标 -->
        <p v-for="(item,i) in list">索引值:{
  { i }}--->每一项:{
  { item }}</p>
        <!-- v-for遍历循环对象数组 -->
        <p v-for="user in list2">编号:{
  { user.id }}--->姓名:{
  { user.name }}</p>
        <!-- v-for在遍历对象的键值对时,除了value,key外,第三个位置还有index -->
        <p v-for="(value,key) in user">值:{
  { value }}--->键:{
  { key }}</p>
        <!-- v-for迭代数字,count值从1开始 -->
        <p v-fo

最低0.47元/天解锁文章

autumn-leaf

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue.js03之常用标签v-for,v-if,v-show

相信大家看了我的前面两次博客关于Vue.js相关的讲解之后，应该对Vue.js了解了一些基础知识了。本次将会继续讲解Vue.js常用的指令v-for,v-if和v-show。v-for我们用 v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用 item in items形式的特殊语法，item是源数据数组并且item是数组元素迭代的别名。接下来我们上一段代码进行详细的...
复制链接

扫一扫

专栏目录