lipis
diff --git a/‎src/v2/api/index.md
Lines changed: 7 additions & 7 deletions b/‎src/v2/api/index.md
Lines changed: 7 additions & 7 deletions
diff --git a/‎src/v2/guide/list.md
Lines changed: 14 additions & 74 deletions b/‎src/v2/guide/list.md
Lines changed: 14 additions & 74 deletions
@@ -1328,8 +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>
+
+  <p class="tip">When used together with v-if, v-for has a higher priority than v-if. See the <a href="../guide/list.html#v-for-with-v-if">list rendering guide</a> for details.</p>
 
 - **See also:** [Conditional Rendering - v-if](../guide/conditional.html)
 
@@ -1413,9 +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>
-  
+
+  <p class="tip">When used together with v-if, v-for has a higher priority than v-if. See the <a href="../guide/list.html#v-for-with-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:**
@@ -1476,7 +1476,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
 
   <!-- key modifier using keyCode -->
   <input @keyup.13="onEnter">
-  
+
   <!-- the click event will be triggered at most once -->
   <button v-on:click.once="doThis"></button>
   ```
@@ -1527,7 +1527,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
 
   <!-- shorthand -->
   <img :src="imageSrc">
-  
+
   <!-- with inline string concatenation -->
   <img :src="'/path/to/images/' + fileName">
 
 
@@ -329,88 +329,28 @@ new Vue({
 </script>
 {% endraw %}
 
-### `v-for` and `v-if`
+### `v-for` with `v-if`
 
-In Vue template, `v-for` has a higher priority than `v-if` when they exists in the same node.
+When they exists on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately. This is very useful when you want to render nodes for only _some_ items, like below:
 
-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]
-  }
-})
+``` html
+<li v-for="todo in todos" v-if="!todo.isComplete">
+  {{ todo }}
+</li>
 ```
 
-Because `v-for` has higher priority than `v-if`, Vue 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.
+The above only renders the todos that are not complete.
 
-```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>
-```
+If instead, your intent is to conditionally skip execution of the loop, you can place the `v-if` on a wrapper element (or [`<template>`](conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt)). For example:
 
-```js
-new Vue({
-  el: '#v-for-if-complicated',
-  data: {
-    list: [0, false, 1],
-    list2: [4, 5, 6]
-  }
-})
+``` html
+<ul v-if="shouldRenderTodos">
+  <li v-for="todo in todos">
+    {{ todo }}
+  </li>
+</ul>
 ```
 
-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: [
6AD8
0, false, 1],
-    list2: [4, 5, 6]
-  }
-})
-</script>
-{% endraw %}
-
 ## `key`
 
 When Vue 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.