sdras
diff --git a/‎src/v2/api/index.md
Lines changed: 5 additions & 1 deletion b/‎src/v2/api/index.md
Lines changed: 5 additions & 1 deletion
diff --git a/‎src/v2/guide/conditional.md
Lines changed: 4 additions & 0 deletions b/‎src/v2/guide/conditional.md
Lines changed: 4 additions & 0 deletions
diff --git a/‎src/v2/guide/list.md
Lines changed: 84 additions & 1 deletion b/‎src/v2/guide/list.md
Lines changed: 84 additions & 1 deletion
@@ -1328,6 +1328,8 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
   Conditionally render the element based on the truthy-ness of the expression value. The element and its contained directives / components are destroyed and re-constructed during toggles. If the element is a `<template>` element, its content will be extracted as the conditional block.
 
   This directive triggers transitions when its condition changes.
+  
+  <p class="tip">When used together with v-if, v-for has a higher priority than v-if. Check the <a href="../guide/list.html#V-for-and-v-if">list rendering guide</a> for details.</p>
 
 - **See also:** [Conditional Rendering - v-if](../guide/conditional.html)
 
@@ -1411,7 +1413,9 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
     {{ item.text }}
   </div>
   ```
-
+  
+  <p class="tip">When used together with v-if, v-for has a higher priority than v-if. Check the <a href="../guide/list.html#V-for-and-v-if">list rendering guide</a> for details.</p>
+  
   The detailed usage for `v-for` is explained in the guide section linked below.
 
 - **See also:**
 
@@ -193,3 +193,7 @@ The difference is that an element with `v-show` will always be rendered and rema
 In comparison, `v-show` is much simpler - the element is always rendered regardless of initial condition, with just simple CSS-based toggling.
 
 Generally speaking, `v-if` has higher toggle costs while `v-show` has higher initial render costs. So prefer `v-show` if you need to toggle something very often, and prefer `v-if` if the condition is unlikely to change at runtime.
+
+## `v-if` with `v-for`
+
+When used together with `v-for`, `v-for` has a higher priority than `v-if`. See the <a href="../guide/list.html#V-for-and-v-if">list rendering guide</a> for details.
@@ -329,7 +329,90 @@ new Vue({
 </script>
 {% endraw %}
 
-## key
+### V-for and v-if
+
+In Vue.js template, v-for has a higher priority than v-if when they exists in the same node.
+
+Suppose the example code bellow: 
+
+```html
+<div id="v-for-if"  class="demo">
+  <div v-for="item in list" v-if="item"><div>{{ item }}</div></div>
+  <div v-for="item2 in list2" v-else><div>{{ item2 }}</div></div>
+</div>
+```
+
+```js
+new Vue({
+  el: '#v-for-if',
+  data: {
+    list: [0, false, 1],
+    list2: [4, 5, 6]    
+  }
+})
+```
+
+
+Because v-for has higher priority than v-if, Vue.js will loop item in the list first. If item is true, it will output `item` value, else it will loop list2 and output the items of it.
+
+So the result of the above example code will be:
+ 
+{% raw %}
+<div id="v-for-if" class="demo">
+  <div v-for="item in list" v-if="item"><div>{{ item }}</div></div>
+  <div v-for="item2 in list2" v-else><div>{{ item2 }}</div></div>
+</div>
+<script>
+new Vue({
+  el: '#v-for-if',
+  data: {
+    list: [0, false, 1],
+    list2: [4, 5, 6]    
+  }
+})
+</script>
+{% endraw %} 
+
+Let's see a complicated example. This example shows the case that v-for, v-if, v-else-if and v-else used together.
+
+```html
+<div id="v-for-if-complicated" class="demo">
+  <div v-for="item in list" v-if="item"><div>{{ item }}</div></div>
+  <div v-for="item2 in list2" v-else-if="item === false"><div>{{ item2 }}</div></div>
+  <div v-else><div>else</div></div>
+</div>
+```
+
+```js
+new Vue({
+  el: '#v-for-if-complicated',
+  data: {
+    list: [0, false, 1],
+    list2: [4, 5, 6]    
+  }
+})
+```
+
+Result:
+ 
+{% raw %}
+<div id="v-for-if-complicated" class="demo">
+  <div v-for="item in list" v-if="item"><div>{{ item }}</div></div>
+  <div v-for="item2 in list2" v-else-if="item === false"><div>{{ item2 }}</div></div>
+  <div v-else><div>else</div></div>
+</div>
+<script>
+new Vue({
+  el: '#v-for-if-complicated',
+  data: {
+    list: [0, false, 1],
+    list2: [4, 5, 6]    
+  }
+})
+</script>
+{% endraw %} 
+
+## Key
 
 When Vue.js is updating a list of elements rendered with `v-for`, it by default uses an "in-place patch" strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will simply patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of `track-by="$index"` in Vue 1.x.