Vue.js SandBox

参照: Vue.js 2.x 入門

01: v-textの確認

テスト用テキスト: 'テストテストテストtest'

mustache構文の出力: {{text}}

v-textの出力:

02: v-model確認

文字列を入力:

ここに入力文字列を表示します: {{ text }}

03: v-on:clickの確認

文字列を入力:

入力文字列を反映

ここに入力文字列を表示します: {{ text }}

04: v-htmlの確認

文字列を入力:

入力文字列を反映

ここにHTMLコードを表示します: {{ html }}
ここにHTML出力を表示します:

05: javascript式の確認

ここに2倍の数字を表示します : {{ number * 2 }}

06: フィルターの確認

文字列を入力:

ここに入力文字列の大文字を表示します : {{ text | toUpperCase }}

ここに入力文字列の小文字を表示します : {{ text | toLowerCase }}

07: computedの確認

ここに3倍の数字を表示します : {{ calc3Times }}

08: computed get、setの確認

税抜 :

税込 :

09: v-bind:classの確認

classを切り替え

ターゲット>>[ 表示非表示が切り替わります ]

10: v-if/v-elseの確認

税込み (例 : 1,080円)

税抜き (例 : 1,000円)

11: v-forの確認

12: component定義の確認