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

15195775117

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


如果data是字符串数组



<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>

15195775117

如果data是字典数组


效果图：



组件代码：


<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>

15195775117

如果data是字典


效果图：



组件代码：


<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>