Vue.js v-for的使用

v-for就是平时的for循环

html

   <!--vue-app是根容器-->
    <div id="vue-app">
        <p>第一个数组</p>
        <ul>
            <li v-for="name in names">{{ name }}</li>
        </ul>
        <p>第二个数组</p>
        <ul>
            <li>第一种输出方法</li>
            <li v-for="info in infos">{{ info.name }}---{{ info.age }}</li>
            <li>第二种输出方法</li>
            <li v-for="(info,index) in infos">{{ index }}.{{ info.name }}---{{ info.age }}</li>
        </ul>
    </div>

JS

//实例化vue对象
new Vue({
    el:"#vue-app",
    data: {
        names: ["hw", "zs", "ls"],
        infos: [
            {"name":"hw","age":18},
            {"name":"zs","age":23},
            {"name":"ls","age":32}
        ]
    },
    methods:{},
    computed:{}
});

效果图：

优化  v-for 输出数据 ，可以使用 <template>  进行渲染

简单的来说，就是为 v-for 提供一个 输出 的空盒子，当内容输出完后，盒子就会撤销，并不会显示出来

 

html

    <!--vue-app是根容器-->
    <div id="vue-app">
        <template v-for="(info ,index) in infos">
            <h3>{{ index }}.{{ info.name }}</h3>
            <p>age:{{ info.age }}</p>
        </template>
    </div>

JS

//实例化vue对象
new Vue({
    el:"#vue-app",
    data: {
        infos: [
            {"name":"hw","age":18},
            {"name":"zs","age":23},
            {"name":"ls","age":32}
        ]
    },
    methods:{},
    computed:{}
});

输出效果图(与下面的v-10效果图对比下，就明白了)：

 

v-for嵌套使用

html

    <!--vue-app是根容器-->
    <div id="vue-app">
        <div v-for="(info ,index) in infos">
          <div v-for="(a , b) in info">
              <p>{{ b }}:{{ a }}</p>
          </div>

        </div>
    </div>

JS

//实例化vue对象
new Vue({
    el:"#vue-app",
    data: {
        infos: [
            {"name":"hw","age":18},
            {"name":"zs","age":23},
            {"name":"ls","age":32}
        ]
    },
    methods:{},
    computed:{}
});

效果图：

                                                                (v-10)                        

 

 

如果您有什么不明白的地方或其它想问的可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题

ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验和调色设定,欢迎交流,哈哈哈哈哈