案例：vue指令实现简易tab栏切换（选项卡）
我们的目标如图：
思路
- 利用v-for指令可以生成多个li
- 利用v-bind给绑定一个active类，并且可以用表达式来决定active是true/false
- 利用v-on指令绑定点击事件，点击的同时将变量activeIndex的值修改为对应li的下标
所以每次点击li的时候，activeIndex就变成对应下标。同时每个li会检查activeIndex是否等于自己的下标，确认过了才会显示。
<body>
<div id="app">
<div class="tab">
<ul class="tab-nav">
<li
v-for="(n,i) in 6"
:class="{active:activeIndex==i}"
@click="activeIndex=i"
>
{{n}}
</li>
</ul>
<div class="tab-part">
<div class="part" v-for="(n,i) in 6" :class="{show:activeIndex==i}">
{{n}}
</div>
</div>
</div>
</div>
</body>
案例——模拟v-model的双向绑定
首先，我们回忆一下v-model最简单的写法。
<h3>单个复选框 - 普通绑定</h3>
<p>
<label
><input type="checkbox" v-model="isRem" />是否记住用户名?</label
>
</p>
<p>isRem:{{isRem}}</p>
你去修改isRem的值，页面的勾选也会相应变化。反之，你勾选页面，实例中的isRem的值也会随之变换，我们称之为双向绑定！
另外，isRem在勾选后会显示true;在未勾选会显示false。你也可以自行绑定以下内容去改变默认显示的值<label ><input type="checkbox" v-model="isAgree" :true-value="'是'" :false-value="'否'" />是否同意?</label >
如上，true-value就定义了勾选后会显示的值，而false-value则是未勾选显示的值。
回到正题，如何模拟这种双向绑定，或者说原理是啥？
-
首先，我们将input框的value属性和变量msg绑定在一起实现单向绑定，一旦msg变化，input框的内容也会随之变化
-
其次，给input框绑定input事件，将元素的value赋值给变量msg,所以你在框内输入的时候，也会实时改变msg的值，至此实现双向绑定。
<div id="app">
<!-- 将变量给到value,同时利用输入事件将value给到变量 -->
<p><input type="text" :value="msg" @input="changeHandle" /></p>
<p>{{msg}}</p>
</div>
v-model在各种表单元素中的用法也稍有差异，可以查文档
