一、v-show和 v-if的区别
首先我们要明确的是：
1.v-show是不支持template
2.v-show不可用和v-else一起使用；
其次两者本质的区别：
1.v-show元素无论是否需要显示。它的Dom实际上都存在
2.v-if当条件为false的时候；其对应的原生压根不会渲染到dom中
最后两者的使用场景：
1.如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用v-show否则就使用v-if
二、v-for列表渲染
基本使用
基本格式是： item in arr
item是我们给每项元素起的一个别名， arr是数组名称
当我们遍历一个数组的时候有时候会需要拿到数组的索引
我们可以使用格式：(item, index) in arr;
<thead> <tr> <th style="width: 25%">名称</th> <th style="width: 20%">价格</th> <th style="width: 25%">数量</th> <th style="width: 30%">操作</th> </tr> </thead> <tbody> <tr v-for="(a, index) in shopArr" :key="a.name"> <td>{{a.name}}</td> <td>{{a.price}}</td> <td> <button>-</button> <span>{{a.num}}</span> <button>+</button> </td> <td> <button>编辑</button> <button>删除</button> </td> </tr> </tbody>
注意
同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。
<!-- 这会抛出一个错误，因为属性 todo 此时 没有在该实例上定义 --> <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo.name }} </li>
三、v-model绑定表单数据
概念：
1.v-model指令可以在表单 input，textarea以及select元素上创建双向数据绑定。
2.他会根据控件类型自动选择正确的方法来更新元素。
3.v-model本质上是语法糖，它负责监听用户的输入事件来更新数据，并在极端场景下进行一些特殊处理；
原理：
1.v-bind绑定value属性的值；
2.v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中
具体使用：
//绑定textarea article是一个字符串 <textarea v-model="article"> </textarea> //绑定checkbox -单个勾选框 isAgree是一个布尔值 <input id='agreement' type="checkbox" v-model="isAgree" /> //绑定checkbox -多个复选框 hobbies是一个数组 <label for="basketball"> <input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 篮球 </label> <label for="football"> <input id="football" type="checkbox" v-model="hobbies" value="football"> 足球 </label> <label for="tennis"> <input id="tennis" type="checkbox" v-model="hobbies" value="tennis"> 网球 </label> //radio gender是一个字符串 是input的value <label for="male"> <input id="male" type="radio" v-model="gender" value="male">男 </label> <label for="female"> <input id="female" type="radio" v-model="gender" value="female">女 </label> // 绑定select fruit是一个字符串的时候就是单选，如果是一个数组就是多选 <select v-model="fruit" multiple size="2"> <option value="apple">苹果</option> <option value="orange">橘子</option> <option value="banana">香蕉</option> </select>
关于v-model的修饰符：
1. -lazy
默认情况下，v-model在进行双向绑定时，绑定的是input事件那么每次输入后就会将最新的值和绑定的属性进行同步，如果我们加上lazy符号那么绑定的事件切换为change事件，只有在提交时候才会触发。
2. - number
如果我们希望将输入转化为数字，那么就使用.number在可以转化的情况下，会将其转化为number类型。
3. -trim
如果要自动过滤掉用户输入的空白字符，可以给v-model后面在上.trim修饰符。
