表單類控件承載了一個網頁數據的錄入與交互，本章將介紹如何使用指令v-model完成表單的數據雙向綁定。

6.1 基本用法

表單控件在實際業務較為常見，比如單選、多選、下拉選擇、輸入框等，用它們可以完成數據的錄入、校驗、提交等。
Vue.js提供了v-model指令，用于在表單類元素上雙向綁定數據，例如在輸入框上使用時，輸入的內容會實時映射到綁定的數據上。

 例如下面的例子：

<div id="app"> <input type="text" v-model="message" placeholder="請輸入..."> <p>輸入的內容是：{{message}}</p></div><script> var app = new Vue({ el: "#app", data: { message: "" } });</script>

在輸入框輸入的同時，{{message}}也會實時將內容渲染在視圖中。

 如圖6-1所示：

對于文本域<textarea>也是同樣的用法：

<div id="app"> <textarea v-model="text" placeholder="請輸入..."></textarea> <p>輸入的內容是：</p> <p style="white-space: pre;">{{text}}</p></div><script> var app = new Vue({ el: "#app", data: { text: "" } });</script>

提示：

•  提示v-model后，表單控件顯示的值只依賴所綁定的數據，不再關心初始化時的value屬性，對于在<textarea></textarea>之間插入的值，也不會生效。
•  使用v-model時，如果是用中文輸入法輸入中文，一般在沒有選定詞組前，也就是在拼音階段，Vue是不會更新數據的，當敲下漢字時才會觸發 主站蜘蛛池模板： 嘉鱼县| 博湖县| 寿阳县| 浙江省| 铜梁县| 通化市| 苍梧县| 邻水| 阿合奇县| 双辽市| 密山市| 常山县| 定日县| 体育| 庄浪县| 西乌| 科尔| 田林县| 德安县| 进贤县| 恩施市| 垣曲县| 长沙市| 巴彦淖尔市| 锡林郭勒盟| 正镶白旗| 湟源县| 扬州市| 巴中市| 黑水县| 弥勒县| 石棉县| 安岳县| 中山市| 眉山市| 分宜县| 盐亭县| 青冈县| 珠海市| 凤庆县| 余江县|