2017年9月10日 星期日

v-for，寫在會重複的元件上，元件 in 元件們，{{元件.屬性}} 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for='meal in meals'>{{meal.name}}</li>
        </ul>
        <ul>
            <li v-for='(key,meal) in meals'>{{key}}.{{meal.name}}</li>
            <!-- 1.0.26版寫法 -->
        </ul>
    </div>
    <script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            meals: [{
                'id': 1,
                'name': '麥克炸雞',
                'beverage': '可口可樂'
            }, {
                'id': 2,
                'name': '勁辣雞腿堡',
                'beverage': '爽健美茶'
            }]
        }
    });
    </script>
</body>

</html>


 




Posted by 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)