使用 v-for 展示出陣列

呈現結果為:

  1. {{ todolist.text }}

原始碼如下:

            
        <div id="app-4">
            <ol>
                <li v-for="todolist in todos">
                    {{ todolist.text }}
                </li>
            </ol>
        </div>
            
        

【注意】這裡的todolist可以換成任何詞。

            
        var app4 = new Vue({
          el: '#app-4',
          data: {
            todos: [
              { text: 'Learn JavaScript' },
              { text: 'Learn Vue' },
              { text: 'Build something awesome' }
            ]
          }
        })