Proposal : Conditional Rendering feature (aka Vue's `v-if` / `v-else` / `v-show`)

[mantaroh]

What is this?

Sometime we want to conditional rendering.
This conditional rendering feature change rendering result depending on condition. So developer can implement multiple render page into one spear component.

This feature might depend on props feature. This props feature is an other issue #

This feature inspired from Vue conditional rendering: https://v2.ja.vuejs.org/v2/guide/conditional.html

Use case

1. Conditional Header

Header of site which has logo, menu, hamburger menu might change height per page.

• Top page is 200px height.
• Other page is 150px height.

<div v-if="props.target=='top'">
  <p> This is top page header</p>
</div>
<div v-else>
  <p> This is other page header</p>
</div>

2. Conditional movie component

Imagine you need to implement movie recommend list which show the video in popup if there are movie link, otherwise move to detail page.

In this case, we need to implement this feature with Script language.

But we can implement this feature with conditional rendering w/o script.

<div cms-loop cms-content="movie-recommend">
  <div v-if="{%= movie-recoomend_has-movielinke %}" class="recommend_card">
    <p>The code for popup suggestion</p>
  </div>
  <div v-else class="recommend_card">
     <p>The code for moving detail.</p>
  </div>
</div>

Conditional Rendering Statement

• v-if is attribute, value is boolean value or JavaScript syntax.
  • Support "true" / '"false"` string as well.
• v-else is attribute which doesn't have value.

---

これは何？

条件付きレンダリング機能が必要なるケースがあります。
この条件付きレンダリング機能は条件毎にレンダリング結果を変更できます。そのため、開発者は1つのコンポーネントで複数のレンダリングページを実装することが出来ます。

この機能は Vue の条件付きレンダリング機能からヒントを得ています。: https://v2.ja.vuejs.org/v2/guide/conditional.html

ユースケース

1. 条件付きヘッダー

ロゴやメニュー、ハンバーガーメニューがあるサイトのヘッダの高さをページごとに変更したい場合

• トップページは 200px の高さ
• それ以外は 150px の高さ

<div v-if="props.target=='top'">
  <p> This is top page header</p>
</div>
<div v-else>
  <p> This is other page header</p>
</div>

2. 条件付きムービーコンポーネント

ビデオリンクがある場合にクリックするとポップアップで動画を流し、ない場合は詳細ページに飛ぶようなムービーリコメンドのコンポーネントを作成することを想像してください。

この場合、Script 言語で実装する必要があります。

しかし、条件付きレンダリング機能があればスクリプト無しで実装が可能です。

<div cms-loop cms-content="movie-recommend">
  <div v-if="{%= movie-recoomend_has-movielinke %}" class="recommend_card">
    <p>The code for popup suggestion</p>
  </div>
  <div v-else class="recommend_card">
     <p>The code for moving detail.</p>
  </div>
</div>

条件付きレンダリング文法

• v-if は属性で、ブール値とJavaScript構文をサポートします。
  • "true" / "false" 文字列もサポートします。
• v-else は値なしの属性です。

[yoannes]

Its a nice feature, but I think we should have our original naming. Since we want to keep HTML like as much as possible, what if we have conditional components?

<if>
   ... Something
</if>
<else>
  ... Something else
</else>

[mantaroh]

Its a nice feature, but I think we should have our original naming.

Yep. I agree.

<if>
<else>

This simple tag is nice~ 🚀