VUE指令-數據綁定v-model

時間 2020-06-21

標籤 vue 指令數據綁定 model 简体版

原文原文鏈接

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

v-model 會忽略全部表單元素的 value、checked、selected 特性的初始值而老是將 Vue 實例的數據做爲數據來源。你應該經過 JavaScript 在組件的 data選項中聲明初始值。html

VUE框架數據綁定模型(MVVM)vue

v-model: "xxx" 文本輸入框java

app

框架

<div style="height: 150px;background: #CCC;margin: 5px;">ide

<div style="font-size: 20px;">ui

v0.文本輸入框</div>spa

<hr />code

<div>

<p>{{v0_message}}</p>

</div>

v-model: "xxx" 多行文本輸入

v1.多行文本</div>

<hr />

<div>

<p>{{v0_message}}</p>

</div>

v-model: "xxx" 複選框

v2.複選框</div>

<hr />

<div>

</div>

v-model: "xxx" 多個複選框

v3.多個複選框</div>

<hr />

<div>

<br>

<span>Checked names: {{ checkedNames }}</span>

</div>

v-model: "xxx" 單選按鈕

v4.單選按鈕</div>

<hr />

<div>

<br>

<br>

<span>Picked: {{ picked }}</span>

</div>

v-model: "xxx" 選擇框

v5.選擇框</div>

<hr />

<div>

</select>

<span>Selected: {{ selected }}</span>

</div>

其餘用法

.lazy

在默認狀況下，v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。你能夠添加 lazy 修飾符，從而轉變爲使用 change 事件進行同步：

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

.number

若是想自動將用戶的輸入值轉爲數值類型，能夠給 v-model 添加 number 修飾符：

這一般頗有用，由於即便在 type="number" 時，HTML 輸入元素的值也總會返回字符串。

.trim

若是要自動過濾用戶輸入的首尾空白字符，能夠給 v-model 添加 trim 修飾符：

<!DOCTYPE html>
<html style="height: 100%;">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../lib/vue.v2.5.12.js"></script>
        <title>v-model</title>
    </head>

    <body style="height: 100%;">
        <style>
            .style0 {
                font-size: 25px;
                color: green;
            }
            
            .style1 {
                background: gold;
            }
        </style>
        <!-- 
            VUE指令v-model數據綁定指令
                
            REF:
                http://www.runoob.com/vue2/vue-forms.html
                https://cn.vuejs.org/v2/guide/forms.html
        -->
        <div id="appVue">
            <!-- 選擇框<select/> -->
            <!-- 格式v-model="變量" -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v5.選擇框</div>
                <hr />
                <div>
                    <div>
                        <select v-model="selected">
                            <option disabled value="">請選擇</option>
                            <option>A</option>
                            <option>B</option>
                            <option>C</option>
                        </select>
                        <span>Selected: {{ selected }}</span>
                    </div>
                </div>
            </div>

            <!-- 單選按鈕<input type="radio"/> -->
            <!-- 格式v-model="變量" -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v4.單選按鈕</div>
                <hr />
                <div>
                    <div>
                        <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>
                </div>
            </div>

            <!-- 多個複選框<input type="checkbox"/> -->
            <!-- 格式v-model="變量" -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v3.多個複選框</div>
                <hr />
                <div>
                    <div>
                        <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>
                </div>
            </div>

            <!-- 複選框<input type="checkbox"/> -->
            <!-- 格式v-model="變量" -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v2.複選框</div>
                <hr />
                <div>
                    <div>
                        <input type="checkbox" v-model="v1_bool" style="font-size: 20px;"></input>
                        <p>{{v1_bool}}</p>
                    </div>
                </div>
            </div>

            <!-- 多行文本輸入框<textarea/> -->
            <!-- 格式v-model="變量" -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v1.多行文本</div>
                <hr />
                <div>
                    <div>
                        <textarea v-model="v0_message" placeholder="place holder text" style="font-size: 20px;"></textarea>
                        <p>{{v0_message}}</p>
                    </div>
                </div>
            </div>

            <!-- 文本輸入框<input/> -->
            <!-- 格式v-model="變量" -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v0.文本輸入框</div>
                <hr />
                <div>
                    <div>
                        <input v-model="v0_message" style="font-size: 20px;"></input>
                        <p>{{v0_message}}</p>
                    </div>
                </div>
            </div>
        </div>
        <script>
            new Vue({
                    el: "#appVue",
                    data: {
                        selected: '',
                        picked: '',
                        checkedNames: [],
                        v1_bool: false,
                        v0_message: "還沒輸入"
                    }
                }

            )
        </script>
    </body>

</html>