v-model的雙向數據綁定(表單)

時間 2019-11-16

標籤 model 雙向數據綁定表單欄目 HTML 简体版

原文原文鏈接

　　能夠用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。儘管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。javascript

　　用 v-model 來實現vue的雙向數據綁定，只容許在表單控件中使用。vue

　　v-model 在內部使用不一樣的屬性爲不一樣的輸入元素並拋出不一樣的事件：java

text 和 textarea 元素使用 value 屬性和 input 事件；node
checkbox 和 radio 使用 checked 屬性和 change 事件；數組
select 字段將 value 做爲 prop 並將 change 做爲事件。瀏覽器

1、基礎用法

一、單行文本——input

　　對於須要使用輸入法 (如中文、日文、韓文等) 的語言，你會發現 v-model不會在輸入法組合文字過程當中獲得更新。若是你也想處理這個過程，請使用 input 事件。app

<body>
    <div id="app">
        <input type="text" name="" v-model="msg">
        <p>{{msg}}</p>
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: 'alex'
            }
        })
    </script>
</body>

　　在表單中輸入什麼信息，下面就顯示相應的信息。顯示效果以下所示：spa

二、多行文本——textarea

<body>
    <div id="app">
        <span>Multiline message is:</span>
        <p style="white-space: pre-line">{{ message }}</p>
        <br>
        <textarea v-model="message" placeholder="add multiple lines"></textarea>
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: 'sadwad'
            }
        })
    </script>
</body>

　　顯示效果以下所示：3d

三、複選框

（1）單個複選框，綁定到布爾值

<body>
    <div id="app">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                checked: false,
                checkedNames: []
            }
        })
    </script>
</body>

　　本來顯示false，點擊方框後切換爲true，顯示效果以下所示：code

（2）多個複選框，綁定到同一個數組

<body>
    <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 type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                checkedNames: []
            }
        })
    </script>
</body>

　　顯示效果以下：

四、單選按鈕

<body>
    <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 type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                picked: ''
            }
        })
    </script>
</body>

　　顯示效果以下：

五、選擇框

（1）單選狀況

<body>
    <div id="app">
        <select v-model="selected">
            <option disabled value="">請選擇</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                selected: ''
            }
        })
    </script>
</body>

　　顯示效果以下：

　　若是 v-model 表達式的初始值未能匹配任何選項，<select> 元素將被渲染爲「未選中」狀態。

（2）多選狀況（綁定到一個數組）

<body>
    <div id="app">
        <select v-model="selected" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <span>Selected: {{ selected }}</span>
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                selected: []
            }
        })
    </script>
</body>

　　顯示效果以下所示：

（3）v-for 渲染的動態選項

<body>
    <div id="app">
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                selected: 'A',
                options: [
                    { text: 'One', value: 'A'},
                    { text: 'Two', value: 'B'},
                    { text: 'Three', value: 'C'}
                ]
            }
        })
    </script>
</body>

　　顯示效果以下所示：

2、值綁定

　　對於單選按鈕，複選框及選擇框的選項，v-model 綁定的值一般是靜態字符串 (對於複選框也能夠是布爾值)：

<!-- 當選中時，`picked` 爲字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 爲 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 當選中第一個選項時，`selected` 爲字符串 "abc" -->
<select v-model="selected">
    <option value="abc">ABC</option>
</select>

　　顯示效果以下所示：

　　可是有時咱們可能想把值綁定到 Vue 實例的一個動態屬性上，這時能夠用 v-bind 實現，而且這個屬性的值能夠不是字符串。

一、複選框

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

　　頁面上出現一個選擇框，沒有點選時，toggle的值爲‘no’；點選時，toggle的值爲'yes'。

　　這裏的 true-value 和 false-value 特性並不會影響輸入控件的 value 特性，由於瀏覽器在提交表單時並不會包含未被選中的複選框。若是要確保表單中這兩個值中的一個可以被提交，(好比「yes」或「no」)，請換用單選按鈕。

二、單選按鈕

三、選擇框的選項

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。