v-for的一些小demo

  • 循环在一个下拉列表框里
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="time">
        <!-- 1.绑定select,代表option的value值 -->
            <select v-model="select" >
           <!-- 2. value绑定"option.id" -->
                <option v-for="option in options" v-bind:value="option.id">{{option.title}}</option>
            </select>
            <!-- 3.显示value值"option.id" -->
            <p v-text="select"></p>
        </div>
    </body>
    <script type="text/javascript">
    
            var datetime=[{"id":485,"title":"三角函数60-80课程","user_package_id":165,"progress":0},
                                {"id":486,"title":"数列 ","user_package_id":165,"progress":0}]
    
            var time= new Vue({
                el:'#time',
                data:{
                    select:'',
                    options:datetime
                }
            })
    </script>
    </html>
    demo1

     

posted @ 2016-07-16 14:03  Secretmm  阅读(194)  评论(0编辑  收藏  举报