Vue模板語法（二）

2.3 條件渲染

v-if

v-else-if

v-else

v-show 條件展現

<h3> 條件渲染 - 單路分支 </h3>

<p v-if = "flag"> A </p>

​

​

<h3> 條件渲染 - 雙路分支 </h3>

<p v-if = "flag"> A </p>

<p v-else > B </p>

​

​

<h3> 條件渲染 - 多路分支 </h3>

<p v-if = "type === '美食'"> 美食 </p>

<p v-else-if = " type === '遊戲' "> 遊戲 </p>

<p v-else> 睡覺 </p>

​

<h3> 條件展現 </h3>

​

<p v-show = " showFlag "> 條件展現 </p>

思考總結

思考： v-if vs v-show

1. 效果看起來同樣

2. why Vue要出兩個類似的指令？

v-if控制的是元素的存在與否

v-show控制的是元素的display:none屬性

​

思考？ 若是出事條件爲假時？ v-if v-show 誰的性能損耗較高？

v-show

​

總結： 項目中如何選擇哪個？

頻繁切換用 v-show

若是不是很頻繁的切換，那咱們用 v-if

2.4 列表渲染

v-for 指令

<h3> 數組 </h3>

<ul>

<li v-for = "(item,index) in arr" :key = " index ">

{{ item }} -- index{{ index }}

</li>

</ul>

<h3> 對象 </h3>

<ul>

<li v-for = "(item,key,index) of obj" :key = "index">

{{ item }} -- {{ key }} -- {{ index }}

</li>

</ul>

<h3> json </h3>

<ul>

<li v-for = "item in json" :key = "item.id">

<span> 商品名稱： {{ item.shop_name }} </span>

<span> 商品價格： {{ item.price }} </span>

</li>

</ul>

​

<h3> 循環嵌套 </h3>

​

<ul>

<li v-for = "item in lists" :key = "item.id">

<h3> 商品類型： {{ item.shop_name }} </h3>

<ul>

<li v-for = "item in item.type" :key = "item.id">

<p> 製造商： {{ item.maker }} </p>

</li>

<!-- <li v-for = "ele in item.type" :key = "ele.id">

<p> 製造商： {{ ele.maker }} </p>

</li> -->

</ul>

</li>

</ul>

​

<h3> 循環number / string </h3>

​

<p v-for = "item in 10"> {{ item }} </p>

<p v-for = "item in 'abc'"> {{ item }} </p>

總結：

列表渲染參數能夠寫三個，分別爲 item key index

列表渲染，要在渲染的元素身上加一個key，做爲這個元素惟一的標識 ,

思考: 這是爲何？

這個key最好是id,由於id惟一？思考： 爲何不能是index

循環嵌套式，參數名稱是能夠一致的

in / of 均可以使用

2.5 事件處理器

v-on

2.6 表單控件綁定

v-model

雙向數據綁定

VM 改變 V隨之改變

V改變， VM也隨之改變

v-model只用於表單

理由： v-model默認綁定value屬性

技巧： 看到表單直接 v-model