Vue 2.5从零开始学习 — v-if，v-show，v-for 指令

Vue 的 v-if，v-show，v-for 指令

文档警告 Warning：

由于做笔记没有注意到 Vue 官方文档中的提示、书写规范，之前在 Vue 实例对象中，data 的写法是有误的。

从本页文档开始将使用通行写法。

When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is
created we can call it to return a fresh copy of the initial data.

v-if 与 v-show

按照惯例，我们依然从一个需求引入我们的知识点：

页面上有一个按钮，我想让他控制某个内容元素是否显示，在 Vue 我该怎么做呢？

1545043084227.png

    

        
Hello world
         show or hide 
    

    

• 我们定义了一个布尔变量，用于表示是否显示内容的布尔逻辑状态 即 true or false
• v-if 指令 和 v-show 指令正需要一个这样的布尔值，它们可以将逻辑值的真假绑定在元素上，以此决定元素是否显示。
• 还记得我们的 button 点击事件怎么写么？

那 v-if 和 v-show 有什么区别呢 ？我们按下 F12，打开集成查看器一探究竟吧！

当我们使用 v-if 时：

    
Hello world
     show or hide 

1545043084227.png

当我们点击按钮后：

1545043134772.png

• 由此可见，v-if 直接改变了文档内容，将该元素从 DOM 中去除掉了。

---

而当我们使用 v-show 时：

    
Hello world
     show or hide 

当我们点击按钮后：

1545043283315.png

• 由此可见，v-show 是通过添加了 CSS 属性 display: none; 来隐藏元素的。

根据情况而定：

• 如果元素数量非常多时，那么频繁地操作 DOM 增删显然不是一个好的选择，所以更多选择 v-show
• 如果显示和隐藏并不那么频繁，那么 v-if 也是可以的。

v-for

学过一个或多个编程语言后，对 for 一定不陌生，应该几乎是所有的编程语言都把 for 定为了一个和循环相关的关键字，当然在 Vue 中也沿用了这种标示。

比如我有一组数据想要罗列展示，显然手打一行一行地敲成 HTML 文档内容是一个非常麻烦低效的选择。

那么学习了 Vue ，我们可以这样做：

    

        

            
 {{ item }}
        
    

    

• 语法解析：类同与 Python 的 for 循环，除开 in 变成了 of 以外，仍然是 for 取出的单项 in 项目总集合 的形式， 取出的单项是可以作为 插值表达式 中的数据使用的哦！

• 显而易见，data 中对应 list 的数据总集合一定要是某种可迭代的数据集合类，比如数组、字典等。

• Attention 1： 当我们使用了 v-for ，为了尽可能地提升渲染效率，我们都应该加上 :key 指令，:key 指令必须和一个永不重复的值绑定，一般不使用 item，因为 item 很可能重复。

• Attention 2：大多数情况下会使用循环次数下标，写成：

  
      {{ item }}
  
  

  但这并不是最终的完美选择，但是当需要做排序等这类频繁改变列表元素位置的操作时，index 作为 key 值会被打乱。

  思考题： 那么请问这个最终解决方案应该是什么呢？