テキストエリアへの双方向データーバインド

　　　

HTML

<div id="app">
<textarea v-model="message">{{message}}</textarea>
<p>入力内容:{{message}}</p>
</div>

JavaScript

var app = new Vue({
el: '#app',
data: {
message: 'v-modelを使った双方向データバインド'
}
});

テキストに記載したものが、v-model機能によってちゃんとコンポーネント側に伝えられているかチェックしてみよう。| Let's check if what is described in the text is properly transmitted to the component side by the v-model function.

テキストに適当に書く　→　F12　→　console →　「app.message」と入力　→　反映しているのを確認

今度はdata側からDOMを操作してみよう。| Now let's manipulate the DOM from the data side.

F12 →　console →　「app.message ="ここに適当な文字を入れてみよう"」　→　ENTER

単体のチェックボックスでの双方向データバインド

HTML

<div id="app2">
<label class="yellow">ケーキはお好きですか？:{{answer}}</label>
<input id="cake" type="checkbox" v-model="answer" true-value="はい"　false-value="いいえ">
<label for="cake">チェックしてください</label>
</div>

CSS

.yellow {
background: linear-gradient(transparent 65%, yellow 65%);
}

JavaScript

var app2 = new Vue({
el: '#app2',
data: {
answer:'はい'
}
});

　　　

v-modelでバインドしたプロパティにはtrueまたはfalseが設定されます。チェックを付けた場合にはtrue、チェックをつけなかった場合にはfalseが代入されることになるので、プロパティをそのまま描画すると'true'や'false'という文字列が表示されてしまいます。

　　　　

そこで、trueやfalseでなく文字列をバインドする方法があり、チェックボックスに特別な属性true-valueとfalse-valueを使うと文字列をバインドできます。

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー