请选择 进入手机版 | 继续访问电脑版
爱气象,爱气象家园! 

气象家园

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

搜索
查看: 3026|回复: 2

Vue编程学习之列表与for循环

[复制链接]

新浪微博达人勋

发表于 2021-10-12 11:32:37 | 显示全部楼层 |阅读模式

登录后查看更多精彩内容~

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博登陆

x
本帖最后由 15195775117 于 2021-10-12 13:46 编辑

写一个列表,一般我们把所有的项都写在一个变量例(如定义为data)里,
data可以是数组,可以是字典,等等
我们按数据类型来分类,列出不同的写法:


如果data是字符串数组
列表.png


<template><div>
    <ul id="test">
        <li v-for="x in data">{{x}}</li>
    </ul>
</div></template>

<script>
    let cities=['北京','上海','广州']
    export default {
        data() {
            return {
                data:cities
            }
        }
    }
</script>






密码修改失败请联系微信:mofangbao

新浪微博达人勋

 楼主| 发表于 2021-10-12 13:43:05 | 显示全部楼层
本帖最后由 15195775117 于 2021-10-12 13:46 编辑

如果data是字典数组


效果图:
列表2.png


组件代码:


<template><div>
    <ul id="test">
        <li v-for="x in data">{{x.city}},位于{{x.zone}}</li>
    </ul>
</div></template>

<script>


    let info=[
    {city: '北京', zone: '华北'},
    {city: '上海', zone: '华东'},
    {city: '广州', zone: '华南'}]


    export default {
        data() {
            return {
                data:info
            }
        }
    }
</script>




密码修改失败请联系微信:mofangbao
回复 支持 反对

使用道具 举报

新浪微博达人勋

 楼主| 发表于 2021-10-12 14:24:11 | 显示全部楼层
如果data是字典


效果图:
键值对.png


组件代码:


<template><div>
    <ol id="test">
        <li v-for="(key,value) in data">键名:{{value}},键值:{{key}}</li>
    </ol>
</div></template>

<script>
// 这个结构看起来有点怪,键和值相反
let info={name:'mike',age:'18',gender:'male'}

export default {
    data() {
        return {data:info}
    }
}
</script>



密码修改失败请联系微信:mofangbao
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

Copyright ©2011-2014 bbs.06climate.com All Rights Reserved.  Powered by Discuz! (京ICP-10201084)

本站信息均由会员发表,不代表气象家园立场,禁止在本站发表与国家法律相抵触言论

快速回复 返回顶部 返回列表