iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

菜鳥學前端,一起vue起來 !系列 第 26

Day 26. 雙向綁定語法糖 - v-model

表單輸入綁定

我們可以用v-model指令在表單<input><textarea><select>元素上建立雙向數據綁定,

v-model常用在表單上,和元素來做雙向數據綁定,像是結合v-bindv-on一樣,用v-bind初始綁定與呈現資料,用v-on監聽事件來做資料更新。

v-model 在内部為不同的輸入元素使用不同的 property並拋出不同的事件:

  • text 和 textarea 元素使用 value property 和 input 事件
  • checkbox 和 radio 使用 checked property 和 change 事件
  • select字段將value作為 prop 並將 change 作為事件

文本

<div id="app">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
           message:''
        }
    });
</script>

當我們在文字框打字時,下面的message就會跟著改變。
https://ithelp.ithome.com.tw/upload/images/20211008/201314008CSScym4Ip.png
https://ithelp.ithome.com.tw/upload/images/20211008/20131400hLEa96nuQU.png

多個複選框

如果有多個複選框,可以綁定到同一個數組

<div id="app">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            checkedNames: []
        }
    });
</script>

https://ithelp.ithome.com.tw/upload/images/20211008/20131400g6mdG2EVi3.png
https://ithelp.ithome.com.tw/upload/images/20211008/20131400QcqmBd78h4.png

單選按鈕

<div id="app">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            picked: ''
        }
    });
</script>

https://ithelp.ithome.com.tw/upload/images/20211008/20131400aeyAp33e97.png


上一篇
Day 25. v-on的修飾符
下一篇
Day 27. 過濾器 - Filter
系列文
菜鳥學前端,一起vue起來 !30

尚未有邦友留言

立即登入留言