diff --git a/src/.vuepress/components/conditional-1.vue b/src/.vuepress/components/conditional-1.vue
new file mode 100644
index 0000000000..1179e89277
--- /dev/null
+++ b/src/.vuepress/components/conditional-1.vue
@@ -0,0 +1,32 @@
+<template>
+  <div id="no-key-example" class="demo">
+    <div>
+      <template v-if="loginType === 'username'">
+        <label>Username</label>
+        <input placeholder="Enter your username" />
+      </template>
+      <template v-else>
+        <label>Email</label>
+        <input placeholder="Enter your email address" />
+      </template>
+    </div>
+    <button @click="toggleLoginType">Toggle login type</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loginType: 'username'
+    }
+  },
+  methods: {
+    toggleLoginType() {
+      this.loginType = this.loginType === 'username' ? 'email' : 'username'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/.vuepress/components/conditional-2.vue b/src/.vuepress/components/conditional-2.vue
new file mode 100644
index 0000000000..2d5c72b2f7
--- /dev/null
+++ b/src/.vuepress/components/conditional-2.vue
@@ -0,0 +1,32 @@
+<template>
+  <div id="no-key-example" class="demo">
+    <div>
+      <template v-if="loginType === 'username'">
+        <label>Username</label>
+        <input placeholder="Enter your username" key="username-input" />
+      </template>
+      <template v-else>
+        <label>Email</label>
+        <input placeholder="Enter your email address" key="email-input" />
+      </template>
+    </div>
+    <button @click="toggleLoginType">Toggle login type</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loginType: 'username'
+    }
+  },
+  methods: {
+    toggleLoginType() {
+      this.loginType = this.loginType === 'username' ? 'email' : 'username'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/.vuepress/components/list-1.vue b/src/.vuepress/components/list-1.vue
new file mode 100644
index 0000000000..32b9f49884
--- /dev/null
+++ b/src/.vuepress/components/list-1.vue
@@ -0,0 +1,17 @@
+<template>
+  <ul id="example-1" class="demo">
+    <li v-for="item in items">
+      {{ item.message }}
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      items: [{ message: 'Foo' }, { message: 'Bar' }]
+    }
+  }
+}
+</script>
diff --git a/src/.vuepress/components/list-2.vue b/src/.vuepress/components/list-2.vue
new file mode 100644
index 0000000000..1230fa0b27
--- /dev/null
+++ b/src/.vuepress/components/list-2.vue
@@ -0,0 +1,18 @@
+<template>
+  <ul id="example-2" class="demo">
+    <li v-for="(item, index) in items">
+      {{ parentMessage }} - {{ index }} - {{ item.message }}
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      parentMessage: 'Parent',
+      items: [{ message: 'Foo' }, { message: 'Bar' }]
+    }
+  }
+}
+</script>
diff --git a/src/.vuepress/components/list-3.vue b/src/.vuepress/components/list-3.vue
new file mode 100644
index 0000000000..42e3e352f8
--- /dev/null
+++ b/src/.vuepress/components/list-3.vue
@@ -0,0 +1,21 @@
+<template>
+  <ul id="v-for-object" class="demo">
+    <li v-for="value in myObject">
+      {{ value }}
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      myObject: {
+        title: 'How to do lists in Vue',
+        author: 'Jane Doe',
+        publishedAt: '2016-04-10'
+      }
+    }
+  }
+}
+</script>
diff --git a/src/.vuepress/components/list-4.vue b/src/.vuepress/components/list-4.vue
new file mode 100644
index 0000000000..f0d17949a5
--- /dev/null
+++ b/src/.vuepress/components/list-4.vue
@@ -0,0 +1,21 @@
+<template>
+  <ul id="v-for-object" class="demo">
+    <li v-for="(value, name) in myObject">{{ name }}: {{ value }}</li>
+  </ul>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      myObject: {
+        title: 'How to do lists in Vue',
+        author: 'Jane Doe',
+        publishedAt: '2016-04-10'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/.vuepress/components/list-5.vue b/src/.vuepress/components/list-5.vue
new file mode 100644
index 0000000000..bd6a7f0455
--- /dev/null
+++ b/src/.vuepress/components/list-5.vue
@@ -0,0 +1,23 @@
+<template>
+  <ul id="v-for-object" class="demo">
+    <li v-for="(value, name, index) in myObject">
+      {{ index }}. {{ name }}: {{ value }}
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      myObject: {
+        title: 'How to do lists in Vue',
+        author: 'Jane Doe',
+        publishedAt: '2016-04-10'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/.vuepress/components/list-6.vue b/src/.vuepress/components/list-6.vue
new file mode 100644
index 0000000000..91d94f7471
--- /dev/null
+++ b/src/.vuepress/components/list-6.vue
@@ -0,0 +1,5 @@
+<template>
+  <div id="range" class="demo">
+    <span v-for="n in 10">{{ n }} </span>
+  </div>
+</template>
diff --git a/src/.vuepress/components/list-7.vue b/src/.vuepress/components/list-7.vue
new file mode 100644
index 0000000000..6857442ab6
--- /dev/null
+++ b/src/.vuepress/components/list-7.vue
@@ -0,0 +1,53 @@
+<template>
+  <div id="todo-list-example">
+    <form v-on:submit.prevent="addNewTodo">
+      <label for="new-todo">Add a todo</label>
+      <input
+        v-model="newTodoText"
+        id="new-todo"
+        placeholder="E.g. Feed the cat"
+      />
+      <button>Add</button>
+    </form>
+    <ul>
+      <li v-for="(todo, index) in todos" :key="todo.id">
+        {{ todo.title }}
+        <button v-on:click="todos.splice(index, 1)">Remove</button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      newTodoText: '',
+      todos: [
+        {
+          id: 1,
+          title: 'Do the dishes'
+        },
+        {
+          id: 2,
+          title: 'Take out the trash'
+        },
+        {
+          id: 3,
+          title: 'Mow the lawn'
+        }
+      ],
+      nextTodoId: 4
+    }
+  },
+  methods: {
+    addNewTodo() {
+      this.todos.push({
+        id: this.nextTodoId++,
+        title: this.newTodoText
+      })
+      this.newTodoText = ''
+    }
+  }
+}
+</script>
diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 89833d5e9a..a4badbccc2 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -36,8 +36,8 @@ module.exports = {
             'template-syntax',
             // 'computed',
             // 'class-and-style',
-            // 'conditional',
-            // 'list'
+            'conditional',
+            'list'
             // 'events'
           ]
         }
diff --git a/src/guide/conditional.md b/src/guide/conditional.md
new file mode 100644
index 0000000000..bc8eaa040d
--- /dev/null
+++ b/src/guide/conditional.md
@@ -0,0 +1,138 @@
+# Conditional Rendering
+
+<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-conditionals?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how conditional rendering works with Vue School">Learn how conditional rendering works with a free lesson on Vue School</a></div>
+
+## `v-if`
+
+The directive `v-if` is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value.
+
+```html
+<h1 v-if="awesome">Vue is awesome!</h1>
+```
+
+It is also possible to add an "else block" with `v-else`:
+
+```html
+<h1 v-if="awesome">Vue is awesome!</h1>
+<h1 v-else>Oh no 😢</h1>
+```
+
+### Conditional Groups with `v-if` on `<template>`
+
+Because `v-if` is a directive, it has to be attached to a single element. But what if we want to toggle more than one element? In this case we can use `v-if` on a `<template>` element, which serves as an invisible wrapper. The final rendered result will not include the `<template>` element.
+
+```html
+<template v-if="ok">
+  <h1>Title</h1>
+  <p>Paragraph 1</p>
+  <p>Paragraph 2</p>
+</template>
+```
+
+### `v-else`
+
+You can use the `v-else` directive to indicate an "else block" for `v-if`:
+
+```html
+<div v-if="Math.random() > 0.5">
+  Now you see me
+</div>
+<div v-else>
+  Now you don't
+</div>
+```
+
+A `v-else` element must immediately follow a `v-if` or a `v-else-if` element - otherwise it will not be recognized.
+
+### `v-else-if`
+
+The `v-else-if`, as the name suggests, serves as an "else if block" for `v-if`. It can also be chained multiple times:
+
+```html
+<div v-if="type === 'A'">
+  A
+</div>
+<div v-else-if="type === 'B'">
+  B
+</div>
+<div v-else-if="type === 'C'">
+  C
+</div>
+<div v-else>
+  Not A/B/C
+</div>
+```
+
+Similar to `v-else`, a `v-else-if` element must immediately follow a `v-if` or a `v-else-if` element.
+
+### Controlling Reusable Elements with `key`
+
+Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. Beyond helping make Vue very fast, this can have some useful advantages. For example, if you allow users to toggle between multiple login types:
+
+```html
+<template v-if="loginType === 'username'">
+  <label>Username</label>
+  <input placeholder="Enter your username" />
+</template>
+<template v-else>
+  <label>Email</label>
+  <input placeholder="Enter your email address" />
+</template>
+```
+
+Then switching the `loginType` in the code above will not erase what the user has already entered. Since both templates use the same elements, the `<input>` is not replaced - just its `placeholder`.
+
+Check it out for yourself by entering some text in the input, then pressing the toggle button:
+
+<conditional-1 />
+
+This isn't always desirable though, so Vue offers a way for you to say, "These two elements are completely separate - don't re-use them." Add a `key` attribute with unique values:
+
+```html
+<template v-if="loginType === 'username'">
+  <label>Username</label>
+  <input placeholder="Enter your username" key="username-input" />
+</template>
+<template v-else>
+  <label>Email</label>
+  <input placeholder="Enter your email address" key="email-input" />
+</template>
+```
+
+Now those inputs will be rendered from scratch each time you toggle. See for yourself:
+
+<conditional-2 />
+
+Note that the `<label>` elements are still efficiently re-used, because they don't have `key` attributes.
+
+## `v-show`
+
+Another option for conditionally displaying an element is the `v-show` directive. The usage is largely the same:
+
+```html
+<h1 v-show="ok">Hello!</h1>
+```
+
+The difference is that an element with `v-show` will always be rendered and remain in the DOM; `v-show` only toggles the `display` CSS property of the element.
+
+::: tip
+Note that `v-show` doesn't support the ::: v-pre `<template>` ::: element, nor does it work with `v-else`.</p>
+:::
+
+## `v-if` vs `v-show`
+
+`v-if` is "real" conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.
+
+`v-if` is also **lazy**: if the condition is false on initial render, it will not do anything - the conditional block won't be rendered until the condition becomes true for the first time.
+
+In comparison, `v-show` is much simpler - the element is always rendered regardless of initial condition, with 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`
+
+::: tip
+Using `v-if` and `v-for` together is **not recommended**. See the [style guide](TODO:/v2/style-guide/#Avoid-v-if-with-v-for-essential) for further information.
+:::
+
+When used together with `v-if`, `v-for` has a higher priority than `v-if`. See the [list rendering guide](list#v-for-with-v-if) for details.
diff --git a/src/guide/list.md b/src/guide/list.md
new file mode 100644
index 0000000000..8a6449620b
--- /dev/null
+++ b/src/guide/list.md
@@ -0,0 +1,370 @@
+# List Rendering
+
+<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-loops?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to render lists on Vue School">Learn how to render list with a free Vue School lesson</a></div>
+
+## Mapping an Array to Elements with `v-for`
+
+We can use the `v-for` directive to render a list of items based on an array. The `v-for` directive requires a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an **alias** for the array element being iterated on:
+
+```html
+<ul id="example-1">
+  <li v-for="item in items">
+    {{ item.message }}
+  </li>
+</ul>
+```
+
+```js
+Vue.createApp().mount(
+  {
+    data() {
+      return {
+        items: [{ message: 'Foo' }, { message: 'Bar' }]
+      }
+    }
+  },
+  '#example-1'
+)
+```
+
+Result:
+
+<list-1/>
+
+Inside `v-for` blocks we have full access to parent scope properties. `v-for` also supports an optional second argument for the index of the current item.
+
+```html
+<ul id="example-2">
+  <li v-for="(item, index) in items">
+    {{ parentMessage }} - {{ index }} - {{ item.message }}
+  </li>
+</ul>
+```
+
+```js
+Vue.createApp().mount(
+  {
+    data() {
+      return {
+        parentMessage: 'Parent',
+        items: [{ message: 'Foo' }, { message: 'Bar' }]
+      }
+    }
+  },
+  '#example-2'
+)
+```
+
+Result:
+
+<list-2/>
+
+You can also use `of` as the delimiter instead of `in`, so that it is closer to JavaScript's syntax for iterators:
+
+```html
+<div v-for="item of items"></div>
+```
+
+## `v-for` with an Object
+
+You can also use `v-for` to iterate through the properties of an object.
+
+```html
+<ul id="v-for-object" class="demo">
+  <li v-for="value in myObject">
+    {{ value }}
+  </li>
+</ul>
+```
+
+```js
+Vue.createApp().mount(
+  {
+    data() {
+      return {
+        myObject: {
+          title: 'How to do lists in Vue',
+          author: 'Jane Doe',
+          publishedAt: '2016-04-10'
+        }
+      }
+    }
+  },
+  '#v-for-object'
+)
+```
+
+Result:
+
+<list-3 />
+
+You can also provide a second argument for the property's name (a.k.a. key):
+
+```html
+<li v-for="(value, name) in myObject">
+  {{ name }}: {{ value }}
+</li>
+```
+
+<list-4/>
+
+And another for the index:
+
+```html
+<li v-for="(value, name, index) in myObject">
+  {{ index }}. {{ name }}: {{ value }}
+</li>
+```
+
+<list-5/>
+
+:::tip
+When iterating over an object, the order is based on the enumeration order of `Object.keys()`, which is **not** guaranteed to be consistent across JavaScript engine implementations.
+:::
+
+## Maintaining State
+
+When Vue is updating a list of elements rendered with `v-for`, by default it 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 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.
+
+This default mode is efficient, but **only suitable when your list render output does not rely on child component state or temporary DOM state (e.g. form input values)**.
+
+To give Vue a hint so that it can track each node's identity, and thus reuse and reorder existing elements, you need to provide a unique `key` attribute for each item:
+
+```html
+<div v-for="item in items" v-bind:key="item.id">
+  <!-- content -->
+</div>
+```
+
+It is recommended to provide a `key` attribute with `v-for` whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.
+
+Since it's a generic mechanism for Vue to identify nodes, the `key` also has other uses that are not specifically tied to `v-for`, as we will see later in the guide.
+
+:::tip
+Don't use non-primitive values like objects and arrays as `v-for` keys. Use string or numeric values instead.
+:::
+
+For detailed usage of the `key` attribute, please see the [`key` API documentation](TODO:https://vuejs.org/v2/api/#key).
+
+## Array Change Detection
+
+### Mutation Methods
+
+Vue wraps an observed array's mutation methods so they will also trigger view updates. The wrapped methods are:
+
+- `push()`
+- `pop()`
+- `shift()`
+- `unshift()`
+- `splice()`
+- `sort()`
+- `reverse()`
+
+You can open the console and play with the previous examples' `items` array by calling their mutation methods. For example: `example1.items.push({ message: 'Baz' })`.
+
+### Replacing an Array
+
+Mutation methods, as the name suggests, mutate the original array they are called on. In comparison, there are also non-mutating methods, e.g. `filter()`, `concat()` and `slice()`, which do not mutate the original array but **always return a new array**. When working with non-mutating methods, you can replace the old array with the new one:
+
+```js
+example1.items = example1.items.filter(item => return item.message.match(/Foo/))
+```
+
+You might think this will cause Vue to throw away the existing DOM and re-render the entire list - luckily, that is not the case. Vue implements some smart heuristics to maximize DOM element reuse, so replacing an array with another array containing overlapping objects is a very efficient operation.
+
+## Displaying Filtered/Sorted Results
+
+Sometimes we want to display a filtered or sorted version of an array without actually mutating or resetting the original data. In this case, you can create a computed property that returns the filtered or sorted array.
+
+For example:
+
+```html
+<li v-for="n in evenNumbers">{{ n }}</li>
+```
+
+```js
+data() {
+  return {
+    numbers: [ 1, 2, 3, 4, 5 ]
+  }
+},
+computed: {
+  evenNumbers() {
+    return this.numbers.filter(number => number % 2 === 0)
+  }
+}
+```
+
+In situations where computed properties are not feasible (e.g. inside nested `v-for` loops), you can use a method:
+
+```html
+<ul v-for="numbers in sets">
+  <li v-for="n in even(numbers)">{{ n }}</li>
+</ul>
+```
+
+```js
+data() {
+  return {
+    sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
+  }
+},
+methods: {
+  even(numbers) {
+    return numbers.filter(number => number % 2 === 0)
+  }
+}
+```
+
+## `v-for` with a Range
+
+`v-for` can also take an integer. In this case it will repeat the template that many times.
+
+```html
+<div>
+  <span v-for="n in 10">{{ n }} </span>
+</div>
+```
+
+Result:
+
+<list-6 />
+
+## `v-for` on a `<template>`
+
+Similar to template `v-if`, you can also use a :::v-pre`<template>`::: tag with `v-for` to render a block of multiple elements. For example:
+
+```html
+<ul>
+  <template v-for="item in items">
+    <li>{{ item.msg }}</li>
+    <li class="divider" role="presentation"></li>
+  </template>
+</ul>
+```
+
+## `v-for` with `v-if`
+
+:::tip
+Note that it's **not** recommended to use `v-if` and `v-for` together. Refer to [style guide](/v2/style-guide/#Avoid-v-if-with-v-for-essential) for details.
+:::
+
+When they exist 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 can be useful when you want to render nodes for only _some_ items, like below:
+
+```html
+<li v-for="todo in todos" v-if="!todo.isComplete">
+  {{ todo }}
+</li>
+```
+
+The above only renders the todos that are not complete.
+
+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#conditional-groups-with-v-if-on-lt-template-gt)). For example:
+
+```html
+<ul v-if="todos.length">
+  <li v-for="todo in todos">
+    {{ todo }}
+  </li>
+</ul>
+<p v-else>No todos left!</p>
+```
+
+## `v-for` with a Component
+
+> This section assumes knowledge of [Components](TODO:components.html). Feel free to skip it and come back later.
+
+You can directly use `v-for` on a custom component, like any normal element:
+
+```html
+<my-component v-for="item in items" :key="item.id"></my-component>
+```
+
+However, this won't automatically pass any data to the component, because components have isolated scopes of their own. In order to pass the iterated data into the component, we should also use props:
+
+```html
+<my-component
+  v-for="(item, index) in items"
+  v-bind:item="item"
+  v-bind:index="index"
+  v-bind:key="item.id"
+></my-component>
+```
+
+The reason for not automatically injecting `item` into the component is because that makes the component tightly coupled to how `v-for` works. Being explicit about where its data comes from makes the component reusable in other situations.
+
+Here's a complete example of a simple todo list:
+
+```html
+<div id="todo-list-example">
+  <form v-on:submit.prevent="addNewTodo">
+    <label for="new-todo">Add a todo</label>
+    <input
+      v-model="newTodoText"
+      id="new-todo"
+      placeholder="E.g. Feed the cat"
+    />
+    <button>Add</button>
+  </form>
+  <ul>
+    <todo-item
+      v-for="(todo, index) in todos"
+      v-bind:key="todo.id"
+      v-bind:title="todo.title"
+      v-on:remove="todos.splice(index, 1)"
+    ></todo-item>
+  </ul>
+</div>
+```
+
+```js
+const TodoItem = {
+  template: `
+          <li>
+            {{ title }}
+            <button v-on:click="$emit('remove')">Remove</button>
+          </li>
+        `,
+  props: ['title']
+}
+
+Vue.createApp().mount(
+  {
+    components: {
+      'todo-item': TodoItem
+    },
+    data() {
+      return {
+        newTodoText: '',
+        todos: [
+          {
+            id: 1,
+            title: 'Do the dishes'
+          },
+          {
+            id: 2,
+            title: 'Take out the trash'
+          },
+          {
+            id: 3,
+            title: 'Mow the lawn'
+          }
+        ],
+        nextTodoId: 4
+      }
+    },
+    methods: {
+      addNewTodo() {
+        this.todos.push({
+          id: this.nextTodoId++,
+          title: this.newTodoText
+        })
+        this.newTodoText = ''
+      }
+    }
+  },
+  '#todo-list-example'
+)
+```
+
+<list-7/>