From 3fe59eb00fe6673d053da1aff7f3e016c393b49d Mon Sep 17 00:00:00 2001 From: Benson <123504381@qq.com> Date: Sat, 23 Feb 2019 20:47:18 +0800 Subject: [PATCH 1/2] to reduce misleading, add a note for [v-for with v-if] section --- src/v2/guide/list.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/guide/list.md b/src/v2/guide/list.md index 38c76209d7..40906e10e5 100644 --- a/src/v2/guide/list.md +++ b/src/v2/guide/list.md @@ -462,6 +462,8 @@ If instead, your intent is to conditionally skip execution of the loop, you can
No todos left!
``` +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.
+ ## `v-for` with a Component > This section assumes knowledge of [Components](components.html). Feel free to skip it and come back later. From b75b80c866629eab9110537139825b7c395ffb09 Mon Sep 17 00:00:00 2001 From: Benson <123504381@qq.com> Date: Sun, 24 Feb 2019 21:16:01 +0800 Subject: [PATCH 2/2] move note to the top of the target section --- src/v2/guide/list.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/list.md b/src/v2/guide/list.md index 40906e10e5..153a19bc86 100644 --- a/src/v2/guide/list.md +++ b/src/v2/guide/list.md @@ -441,6 +441,8 @@ Similar to template `v-if`, you can also use a `` tag with `v-for` to ## `v-for` with `v-if` +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 @@ -462,8 +464,6 @@ If instead, your intent is to conditionally skip execution of the loop, you canNo todos left!
``` -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.
- ## `v-for` with a Component > This section assumes knowledge of [Components](components.html). Feel free to skip it and come back later.