v-for指令 

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Vue的常见指令</title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
    <!-- 将myList中的元素显示在一个无序列表中         -->
    <h4>one</h4>
        <ul>
            <li>{{myList[0]}}</li>
            <li>{{myList[1]}}</li>
            <li>{{myList[2]}}</li>
            <li>{{myList[3]}}</li>
            <li>{{myList[4]}}</li>
        </ul>
    <h4>v-for循环指令</h4>
        <ul>
            <li v-for="tmp in myList">{{tmp}}</li>
        </ul>
        <h5>拿到变量对应的index</h5>
        <h5>对象</h5>
        <p v-for="(value,key) in cart">{{"key is:"+ key+"value is: "+value}}</p>
        <h5>数组</h5>
        <p v-for="(value,key) in myList">{{"key is:"+ key+"value is: "+value}}</p>
    </div>
    <script>
        new Vue({
            el:"#container",
            data:{
                myList:[100,200,300,400,500],
                cart:{
                    brand:"BMW",
                    price:20
                }
            }
        })
    </script>
 </body>
</html>
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
    <h4>恩</h4>
            <table>
                <thead>
                    <tr>
                        <td>姓名</td>
                        <td>性别</td>
                        <td>年龄</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="value in person">
                        <td>{{value.name}}</td>
                        <td>{{value.sex}}</td>
                        <td>{{value.age}}</td>
                    </tr>
                </tbody>
            </table>
    <h4>v-for </h4>
            <table>
                <thead>
                    <tr>
                        <td>姓名</td>
                        <td>性别</td>
                        <td>年龄</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="value in person">
                        <td v-for="tmp in value">{{tmp}}</td>
                    </tr>
                </tbody>
            </table>
    </div>
    <script>
        new Vue({
            el:"#container",
            data:{
                person:[
                    {name:"Tom",sex:"男",age:18},
                    {name:"Rose",sex:"女",age:17},
                    {name:"Baby",sex:"女",age:18},
                    {name:"Jack",sex:"男",age:19},
                    {name:"Marry",sex:"女",age:18}
                ]
            }
        })
    </script>
 </body>
</html>

一个标签里面只能有一个相同的指令，相同的运算写在一个指令中，{{}}中多个运算用逗号隔开

posted @ 2017-11-01 10:25  匿名的girl  阅读(486)  评论(0)  编辑  收藏  举报