列表渲染

立即函式

立即函式是 Javascript 中一種可以立即執行的函式，其本質其實是個函式表示式。

(function( window, undefined ) {
....
})( window );

v-for

我們用 v-for 指令根據一組數組的選項列表進行渲染。

v-for 指令需要以classList形式的特殊語法中的項，item 是數據數組，並且是數組元素迭代的別名。

<ul>
    <li v-for="item in classList">
        {{ item.name }}
    </li>
</ul>

<script>
  (function(window){
      var data = {
        classList:[ .......]
      }

      var vm = new Vue({
        el:'#app',
        data:data
      })
  })(window)
</script>

渲染结果：

• Sass & Compass
• javascript & jQuery
• jQuery DOM
• Vue.js
• PHP & MySQL

index

排序的意思 如果有加 index 就必須做括號 ( 數據數組, index )

<ul>
    <li v-for="(item,index) in classList">
        {{ index }}.{{ item.name }}
    </li>
</ul>

渲染结果：

• 0.Sass & Compass
• 1.javascript & jQuery
• 2.jQuery DOM
• 3.Vue.js
• 4.PHP & MySQL

v-show

根據條件展示元素的選項是 v-show 指令。

<ul>
    <li v-for="(item,index) in classList" v-show="item.show">
        {{ index }}.{{ item.name }}
    </li>
</ul>

依照 false / true 來判斷是否顯示還是隱藏

完整語法

<div id="app" v-cloak>
  <ul>
    <li v-for="(item,index) in classList" v-show="item.show">
        {{ index }}.{{ item.name }}
    </li>
  </ul>
</div>

<script>
  (function(window){
      var data = {
        classList:[
          {
            name:"Sass & Compass",
            show:false
          },
          {
            name:"javascript & jQuery",
            show:true
          },
          {
            name:"jQuery DOM",
            show:true
          },
          {
            name:"Vue.js",
            show:false
          },
          {
            name:"PHP & MySQL",
            show:true
          }
        ]
      }

      var vm = new Vue({
        el:'#app',
        data:data
      })
  })(window)
</script>

渲染结果：

• 1.javascript & jQuery
• 2.jQuery DOM
• 4.PHP & MySQL