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