Vue(三)--循环语句

v-for:

v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。

 

demo1.

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <script src="../js/vue.js">script>
    head>
    <body>
        <div id="div1">
            <table align="center" >
                <tr class="firstLine">
                    <td>nametd>
                    <td>hptd>
                tr>
                <tr v-for="hero in heros">
                    <td>{{hero.name}}td>
                    <td>{{hero.hp}}td>
                tr>
            table>
        div>
        <script>
            var data = [
                      {name:"a",hp:341},
                      {name:"b",hp:225},
                      {name:"c",hp:427},
                      {name:"d",hp:893}
                ];
            new Vue({
                  el: '#div1',
                  data: {
                      heros:data
                  }
                })
        script>
    body>
html>

Vue(三)--循环语句_第1张图片

 

 

 

2.显示下标

<div id="div1">
            <table align="center" >
                <tr class="firstLine">
                    <td>nametd>
                    <td>hptd>
                    <td>indextd>
                tr>
                <tr v-for="hero,index in heros">
                    <td>{{hero.name}}td>
                    <td>{{hero.hp}}td>
                    <td>{{index}}td>
                tr>
            table>
div>

Vue(三)--循环语句_第2张图片

 

 

 

3.遍历数字

<div v-for="i in 10" style="margin-left: 25rem;">
                <td>{{i}}td>
div>

 

Vue(三)--循环语句_第3张图片

 demo4

<div id="app">
            <ul>
                <li v-for="o in ob">
                    {{o}}
                li>
                <br />
                <li v-for="(key ,value) in ob">
                    {{key}}:{{value}}
                li>
                <br />
                <li v-for="(index,key,value) in ob">
                    {{index}} , {{key}} , {{value}}
                li>
            ul>
        div>
        <script>
            new Vue({
                el:'#app',
                data:{
                    ob:{
                        name:'happy',
                        age:'111',
                        id:'11'
                    }
                }
            })
        script>

Vue(三)--循环语句_第4张图片

 

你可能感兴趣的:(Vue(三)--循环语句)