本文共 1838 字，大约阅读时间需要 6 分钟。

1. 条件判断

1.1 v-if/v-else-if/v-else

上面这三个指令与js中的条件语句if、else 、else if 用法类似

Vue的条件指令可以根据表达式的值在DOM中渲染或者销毁元素或者组件

简单的案例演示：

   
    
    
优秀
    
    
良好
    
    
合格
    
    
不及格
 
   
  

v-if原理：v-if后面的条件为false时，对应的元素及其子元素都不会被渲染，也就是根本不会有对应的标签出现

1.2 条件渲染案例

用户在登录时，可以切换用邮箱登录还是用户账号登录

如下图所示：

   
     
    
这里给两个input输入框加上key属性
     
    
理由：Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素
     
    
案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了
     
    
如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key,并且需要保证key的不同
     
             用户账号:                   
             邮箱地址:                   
    点击切换 
   
  

1.3 v-show

v-show和v-if功能类似，也是决定一个元素是否渲染，但是原理上不同，看下面一个案例：

   
    
    切换     
    要不要展示呢 
   
  

从上图中我们可以看出，当点击切换，v-show条件为false时，仅仅是将元素的display属性设置为none而已。

那么在平时开发中，我们如何选择v-show和v-if呢？

• 当需要在显示和隐藏中来回频繁切换时，用v-show
• 当只有一次切换时，通常用v-if

2. 循环遍历

2.1 v-for 遍历数组

当我们有一组数据需要渲染时，就用v-for来完成。

v-for的语法类型与js中的for循环

格式：item in items

需要注意的是：在遍历的过程中，既可以使用数组的索引，也可以不使用，代码如下：

   
    
    
不用索引
     
    
         
     
{
   {
   book}}
     
    
     
    
使用索引
     
    
         
     
{
   {
   index+1}}-{
   {
   book}}
     
    
 
   
  

效果如下：

在遍历过程中，如果我们需要拿到数组的索引，语法格式为：v-for=(item, index) in items

其中，index就是取出的item在数组中对应的索引值

2.2 v-for 遍历对象

v-for也可以用来遍历对象：

   
         
    
遍历对象
     
    
         
     
             {
   {
   val}}--{
   {
   key}}--{
   {
   index}}         
     
    
 
   
  

显示如下：

可以看出 v-for遍历对象，结构：v-for="(val,key,index) in obj

其中，第一个值val代表对象属性的值，第二个key代表对象的属性名称，第三个代表索引

2.3 组件的key属性

官方在推荐我们使用v-for的时候，给对应的元素和组件加上 :key 属性。

这是为什么呢？

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点。

例如：希望可以在B和C之间加一个F

• 如果没有 :key 的话，Vue底层默认会把C更新成F，D更新成C，E更新成D，最后再插入E

• 但是如果加上 :key属性的话,Vue底层就会直接把F插入到B和C之间

如下图所示：

所以，key的作用主要是为了高效的更新虚拟DOM

2.4 检测数组更新

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。

   
    
    
哪些数组的方法是响应式的
     
    
         
     
{
   {
   num}}
     
    
          
    点击 
   
  

转载地址：http://jqmbi.baihongyu.com/