Vue基础学习 --- 遍历数组

<body>
    <div id="app">
        <ul>
        <!-- 遍历数组 -->
            <li v-for="user in users">
                 {{user.name}}:{{user.age}}
            </li>

            <!-- index索引,从0开始。 -->
            <li v-for="(item, index) in users" :key="index">
                {{item.name}}:{{item.age}}
            </li>

        <!-- 遍历对象 value值如:Nimeide   index键如:name-->
            <li v-for="(value, index) in wife" :key="index">
                {{value}}--{{index}}
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: ‘#app‘,
            data() {
                return {
                    // 数组
                    users: [
                        { name: ‘lisi‘, age: 12 },
                        { name: ‘zhangsan‘, age: 19 },
                    ],
                    // 对象
                    wife: {
                        name: ‘Nimeide‘,
                        age: 18
                    }
                }
            },
        });
    </script>
</body>

原文地址:https://www.cnblogs.com/somethingWithiOS/p/11972135.html

时间: 2024-08-06 11:09:53

Vue基础学习 --- 遍历数组的相关文章

Vue基础学习一

Vue基础一 1.0 前端开发规范 ? 前端开发规范 1.1 vue版本更迭 vue版本 ???-?vue?1.0???2014年 ???-?vue?2.0???2016年 ???-?vue?3.0[?试用版?]?2019年国庆 1.2匿名函数 javascript (function?(形参1,形参2)?{ /?你的代码?/ ?})(实参1,实参2) ???-?好处 ?????-?1.?防止全局作用域 ?????-?2.?防止命名冲突 ?????-?3.?防止一些脚本的攻击 ?????-?4.

vue基础学习(一)

01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= function(){ var c = new Vue({ el:"#box",//选择器 data:{ 'msg':'welcome vue' } }); } </script> 01-02 v-model一般用于表单元素数据双向绑定 <div id="box&quo

Vue基础学习之DOM操作

demo说明: 1.{{message}}                          --声明式渲染 2.v-bind:属性名                        --绑定元素属性 3.v-if="change=='a'"              --判断change=='a',等于则显示该DOM节点 4.v-else-if="change=='b'"      --结合[v-if]使用,判断change=='b',等于则显示该DOM节点 5.v

JavaScript基础学习(三)&mdash;数组

一.数组简介     JavaScript数组的每一项都可以保存任何类型的数据,也就是说数组的第一个位置保存字符串,第二个位置可以保存数值,第三个位置可以保存对象,而且数组的大小是可以动态调整的,即可以随着数据的添加而自动增长以扩容纳新增数据.   二.数组的操作 1.创建 //创建一个空数组 var arr = []; var arr2 = [1,true,new Date()]; arr2.length = 2; alert(arr2); //true   2.pop和push方法     

java基础学习之数组

1.什么是数组 数组为相同数据类型的元素组成的集合,数组元素按线性顺序排列. 在表示数组的每个元素时,使用数组的下标表示数组的位置,其中下标为0的即为数组的第一个元素.最后一个数组的元素下标即为数组长度减一. 声明数组的语法为: 数据类型[] 数组名 = new 数据类型 [ 大小 ]:例如: String[] str = new String[10]; 在定义了数组之后,数组是有默认的初始化值的,当我们没有为其指明初始化值的时候,int默认初始化值为0:String默认初始化值为null,do

java基础学习总结——数组

一.数组的基本概念 数组可以看成是多个相同类型数据组合,对这些数据的统一管理. 数组变量属引用类型,数组也可以看成是对象,数组中的每个元素相当于该对象的成员变量. 数组的元素可以是任何数据类型,包括基本类型和引用类型. C和C++中的数组都可以分配在栈上面,而JAVA中的数组是只能分配在堆上面的,因为JAVA中的数组是引用类型. 二.一维数组 一维数组的声明方式有2种: 格式一:数组元素类型  数组名[ ];  即type var[ ]; 格式二:数组元素类型[ ] 数组名; 即type[ ]

Java基础学习(二)&mdash;数组

一.数组的概念      定义: 数组是存储同一种数据类型的多个元素的集合.      数组既可以存储基本数据类型,也可以存储引用数据类型.      格式:           格式1: 数据类型[] 数组名;           格式2: 数据类型 数组名[];      这样定义完了,但是数组中是没有元素的,我们必须对数组进行初始化.   二.数组的初始化      Java数组必须先初始化,然后才能使用.所谓的初始化就是为数组的元素分配内存空间,并为每个数组元素赋值.      动态初始

vue基础学习(三)

03-01  vue的生存周期-钩子函数 <style> [v-cloak]{display:none;} </style> <div id="box" v-cloak> {{msg}} <p v-text="msg"></p> </div> <script> //解决模板{{XX}}闪烁问题: // css: [v-cloak]{display:none;} 在模板中加v-cloa

Electron+Vue – 基础学习(2): 项目打包成exe桌面应用

项目创建完成,启动正常,接下来就是项目打包了.将测试Demo打包成exe桌面应用,点击exe文件,运行项目. 书接上文,创建项目有三种方式 Git拷贝.直接创建:通过electron社群提供的命令行工具(CLI)  electron-forge 创建项目,看起来对应的项目打包方式也应该有三种才对,但其实细看第一种方式和第三种项目创建方式是一样的,所以它们的项目打包方式也是一样的. 打包 electron 项目webpack工具有 electron-packager 和 electron-buil