初心者でも簡単。Vue.jsで１画面複数パターンを表示する方法

Vue.jsを使ったサイトの開発での主にHTML/CSSでコーディングをしています。(JavaScriptはjQuery+独習で基本を抑えているレベル)

１画面で複数のパターンを表示したい（通常表示とエラーコメント出現時など）が動的な実装までは自分はできないためquery parameterを使って複数パターンのコードを確認してもらえるようにしました。

query parameterとはこのようなものです。

http://my-site-url?pattern=1

コンポーネントから$routeオブジェクトをつかってにqueryオブジェクトにアクセスして、キーと値がを取得することができます。
v-ifディレクティブをつかって要素の出し分けをするようにしました。

<div class="payment">
<div v-if="$route.query.pattern === '1'">
    <div>クレジットカードでお支払い</div>
</div>
<div v-else-if="$route.query.pattern === '2'">
    <div>デポジットでお支払い</div>
</div>
<div v-else>
    <div>銀行振込</div>
</div>
</div>

参考