在Vue中，v-for if經常用于開發中，這兩個指令都可以用來控制DOM元素的渲染。
首先，我們來看一看v-for指令。Vue中，我們可以通過v-for指令來循環渲染DOM元素。v-for指令的語法如下：
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>上面的代碼中，我們通過v-for指令循環遍歷items數組，然后渲染成一個個
元素。其中，item表示當前循環的元素，items表示待遍歷的數組。這里還用到了:key指令，主要是用來優化DOM渲染的。
接下來，我們來看一看v-if指令。Vue中，我們可以通過v-if指令來控制DOM元素是否顯示。v-if指令的語法如下：
<div v-if="isShow"> 這是一個顯示條件判斷 </div>
上面的代碼中，我們通過v-if指令判斷isShow是否為true，如果是true，就會顯示
元素；如果是false，就不會顯示。
同時，在Vue中，我們還可以使用v-else和v-else-if指令來進行條件分支判斷。v-else的語法如下：
<div v-if="isShow"> 顯示條件為true </div> <div v-else> 顯示條件為false </div>
上面的代碼中，如果isShow為true，就會顯示第一個
元素，否則就會顯示第二個
元素。
最后，我們來看一看v-for和v-if同時使用時的語法。在Vue中，我們可以通過這種方式來實現只渲染符合某些條件的項。示例如下：
<div v-for="item in items" :key="item.id" v-if="item.isShow">
{{ item.name }}
</div>上面的代碼中，我們通過v-for指令循環遍歷items數組，并在每一項上加上v-if指令判斷項的isShow是否為true，如果是true，就會顯示對應的
元素；否則就不會顯示。
通過上述介紹，我們可以看出v-for和v-if在Vue中的靈活性，不同的使用方式可以滿足不同的需求，同時也提高了開發效率。
下一篇vue 定義公用方法