[30天 Vue学好学满 DAY12] v-model 双向绑定

v-model

进行资料双向绑定，依据监控类型自动选择正确方式更新元素。
常用於表单:

<input> // 单行输入框
<textarea> // 多行输入框
<select> // 选单

input

单行输入框

Data

data() {
    return {
      text: "",
    };
},

HTML

<input v-model="text" placeholder="input here" />
<p>Input is: {{ text }}</p>

前端实现双向绑定:输入即显示

textarea

多行输入框

HTML

<span>Multiline text is:</span>
 <!-- white-space: pre-line, Enter换行 -->
 <p style="white-space: pre-line">{{ text }}</p>
 <br />
 <textarea v-model="text" placeholder="input multiple lines"></textarea>

white-space: pre-line -> 移除输入按下Enter不换行

前端实现

checkbox

勾选项

Data 改为绑定布林

checked: false

HTML

<input type="checkbox" id="checkbox" v-model="checked" />
{{ checked }}

前端实现

checkbox 多选

Data 改为绑定阵列

checkedList: []

HTML 多个 checkbox 同时绑定checkedList

<input type="checkbox" id="Dinner" value="Dinner" v-model="checkedList" />
<label for="Dinner">Dinner</label>
<input type="checkbox" id="Excerise" value="Excerise" v-model="checkedList" />
<label for="Excerise">Excerise</label>
<input type="checkbox" id="Bath" value="Bath" v-model="checkedList" />
<label for="Bath">Bath</label>
<br />
<span>Checked List: {{ checkedList }}</span>

前端实现

radio

单选按钮，作法同於 checkbox 多选

<input type="radio" id="Juice" value="Juice" v-model="picked" />
<label for="Juice">Juice</label>
<input type="radio" id="Beer" value="Beer" v-model="picked" />
<label for="Beer">Beer</label>

select

下拉式选单，透过option新增选项

HTML

<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
 </select>
<br />
<span>选择了: {{ selected }}</span>

前端实现

绑定指定值 value

单选类

<!-- 选中时，picked 为 Juice -->
<input type="radio" v-model="picked" value="Juice">

复选类

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />

透过bind绑定变数

Data

pick: "",
OptionA: "A", // 绑定"A"於OptionA，并与pick双向绑定

HTML

<input type="radio" v-model="pick" v-bind:value="OptionA">
{{ pick }}

前端实现

透过bind绑定物件

<!-- selected: Object -->
<select v-model="selected">
    <option v-bind:value="{ number: 100 }">100</option>
</select>

修饰符

.lazy : change後才更新

// Enter後刷新
<input v-model.lazy="tezt">

.number : 自动将输入值转为数值。 vs type="number" -> 回传字串符数字

<input v-model.number="age" type="number">

.trim : 过滤字尾空白

<input v-model.trim="msg">

有错误请不吝指教!
参考资料
https://vuejs.org/v2/guide
https://ithelp.ithome.com.tw/articles/10198986
https://ithelp.ithome.com.tw/articles/10198999
https://ithelp.ithome.com.tw/articles/10203933
https://ithelp.ithome.com.tw/articles/10199021
https://cythilya.github.io/2017/04/17/vue-methods-and-event-handling/

感谢各路大神