1. 程式人生 > 其它 >v-bind和v-model的區別

v-bind和v-model的區別

v-bind和v-model的區別
https://segmentfault.com/a/1190000014813168

簡單來說,區別如下:
1.v-bind用來繫結資料和屬性以及表示式,縮寫為':'
2.v-model使用在表單中,實現雙向資料繫結的,在表單元素外使用不起作用

一、v-model

v-model多在表單中使用,在表單元素上建立雙向繫結,根據控制元件型別選擇正確的方法更新元素,可以繫結text、radio、checkbox、selected

1. 繫結text

<input type="text" v-model
="val" />
<p>
{{val}} </p>

2. 繫結radio

<input type="radio" value="one" v-model="radioVal" />
<input type="radio" value="two" v-model="radioVal" />
<label for v-bind="radioval" />

radioval的值隨著選擇單選框的值,會變成one 或者 two

3. 繫結checkBox

(1)單個勾選框,最終的值為邏輯值true和false

<input type="checkbox" v-model="checkVal"/>
<label for="checkbox">{{checkVal}}</label>

(2)多個勾選框時,將值繫結到一個數組

<p v-bind="message"></p>
<p>{{message}}</p>

2.繫結屬性

<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>

3.繫結表示式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

4.繫結html

<div>{{{ raw_html }}}</div>

這個時候必須要使用三個{}

參考:https://v1-cn.vuejs.org/guide...

此文章僅僅是整理,在日後的學習和工作中,有新的idea會同步更新。