Merge pull request #169 from nalpan/guide-migration-v-if-v-for

v-if vs. v-for Precedenceの翻訳

Author: potato4d

src/.vuepress/config.js

@@ -129,6 +129,7 @@ const sidebar = {
         'migration/render-function-api',
         'migration/slots-unification',
         'migration/transition',
+        'migration/v-if-v-for',
         'migration/v-model',
         'migration/v-bind'
       ]

src/guide/migration/v-if-v-for.md

@@ -0,0 +1,29 @@
+---
+title: v-if と v-for の優先順位
+badges:
+  - breaking
+---
+
+# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
+
+## 概要
+
+- **BREAKING**: 二つを同じエレメントで利用している場合、`v-if` は　`v-for` より優先されます。
+
+## イントロダクション
+
+Vue.js で最も一般的に使われているディレクティブの二つは `v-if` と `v-for` です。したがって開発者が両方を一緒に使用したいときが来るのは当然のことです。これは推奨される方法ではありませんが、必要な場合があるため、私たちはその仕組みについてのガイダンスを提供したいと思いました。
+
+## 2.x での構文
+
+2.x では、`v-if` と `v-for` を同じエレメントで使うと、`v-for` が優先されます。
+
+## 3.x での構文
+
+3.x では、 `v-if` はいつも `v-for` より優先されます。
+
+## 移行の戦略
+
+構文の曖昧さにより、同じエレメントで両方の使用を避けることをお勧めします。
+
+これをテンプレートレベルで管理するのではなく、これを実現する一つの方法は表示されている要素のリストを除外する算出プロパティを作成することです。