vue.js 的模板語法，列表渲染和條件渲染

1. 模板語法

1. alert console.log 不能用
2. if條件改成使用三元表達式（三目運算）
4. 方法，函數一定要寫在methods裏面， 不要直接寫在模板語法中



5. 模板語法中支持使用匿名函數可以直接寫

<p> fun: {{ (function(){ return 1+1 })() }}</p>

列表渲染

使用 v-for指令
v-for指令可以識別所有數據類型和數組，對象

item表示隨便起什麼名字都可以； 等於號後面的第一個參數為內容，如果需要下標或者key，可以用括號括起來，括號裏第一個是下標，第二個是值，第三個是key，不需要的可以不用寫。等於號後面第二個參數是 in 也就是for in遍歷，第三個參數是你在vue實例中data中自定義的數據，可以是各種數據類型，數組或者對象。話不多説，看代碼，等於號只是連接符，寫不寫都可以

總結:

1. v-for 最多可以有三個參數
2. 格式
   v-for = “(index,item,key) in data”
   名詞解釋：
   index: 索引
   item； data中的每一個
   key； 如果是對象， 表示對象的key
3. v-for如果有循環嵌套， 那麼value可以寫成一樣的命名， 但是我們建議大家寫成不一樣的命名， 理由： 比較語義化
4. v-for 可以循環 數字或是一個字符
   擴展：
   v-for = ’ item in data’ 等於號後面的就是相當於參數 然後底層將這個字符串做了分割處理
   底層：

function v-for( arg ){
    //做字符串處理
    var data = 'data'
        for( var i = 0 ; i < data.length; i++ ){
        }
}

條件渲染

條件渲染分為兩種，一種是 v-if ,一種是 v-show

• v-if又分為單路分支和雙路分支或者是多路分支； 只有if後面的值為true時才會有這個dom元素，為false時不會有這個dom元素

<script>
    new Vue({
        el:'#app' ,
        data:{
            f:true，
            text:'a'
        }
     })
</script>

• 單路分支

<p v-if = " f ">
                        true
            	</p>

• 雙路分支

<p v-if = " f ">
                 true
            </p>
            <p v-else>
                    false
            </p>

• 多路分支

<p v-if = " text === 'A'"> A </p>
        <p v-else-if = " text === 'B'"> B </p>
        <p v-else> C </p>

v-show

<p v-show = " f ">
    if條件
</p>

v-if vs v-show

1. v-if 操作的是DOM存在與否, v-show操作的DOM的display樣式屬性

1.5.如果一開始條件為真的話，v-if不會生成dom元素，而v-show不管條件是否為真都會產生dom元素

2. 性能

• 如果條件為假，v-show有較高的初始渲染開銷
• v-if 有更高的切換開銷
  項目中建議：
  如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。