https://jsrun.pro/cLfKp/edit
### 基礎語法
使用v-model在表單元素`<input>`、`<textarea>`和`<select>`元素上創建雙向數據綁定。v-model本質不過是語法糖。
重要: `v-model`會忽略所有表單元素的`value`、`checked`、`selected`attribute 的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的`data`選項中聲明初始值。
`v-model`在內部為不同的輸入元素使用不同的屬性并拋出不同的事件:
* text 和 textarea 元素使用`value`屬性和`input`事件;
* checkbox 和 radio 使用`checked`屬性和`change`事件;
* select 字段將`value`作為 prop 并將`change`作為事件。
重要: 對于需要使用[輸入法](https://zh.wikipedia.org/wiki/%E8%BE%93%E5%85%A5%E6%B3%95)(如中文、日文、韓文等) 的語言,你會發現`v-model`不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程,請使用`input`事件。
#### 文本
#### 多行文本
#### 復選框
多個復選框,可以綁定數組
#### 單選按鈕
#### 選擇框
### 值綁定
#### 復選框
```
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
```
```
// 當選中時
vm.toggle === 'yes'
// 當沒有選中時
vm.toggle === 'no'
```
這里的`true-value`和`false-value`attribute 并不會影響輸入控件的`value`attribute,因為瀏覽器在提交表單時并不會包含未被選中的復選框。如果要確保表單中這兩個值中的一個能夠被提交,(比如“yes”或“no”),請換用單選按鈕。
#### 單選按鈕
```
<input type="radio" v-model="pick" v-bind:value="a">
```
```
// 當選中時
vm.pick === vm.a
```
#### 選擇框的選項
### 修飾符
#### .lazy
v-model在每次input事件觸發后將輸入框的值與數據進行同步, 通過添加lazy修飾符,從而轉變為使用change事件進行同步。
```
<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg" >
```
#### .number
如果想自動將用戶的輸入值轉為數值類型, 可以給v-model添加number修飾符:
```
<input v-model.number="age" type="number">
```
這通常很有用,因為即使在 type="number" 時,HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat() 解析,則會返回原始的值。
#### .trim
如果要自動過濾用戶輸入的首尾空白字符,可以給`v-model`添加`trim`修飾符:
```
<input v-model.trim="msg">
```
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- Vue語法
- Vue安裝
- Vue實例
- 模板語法
- 計算屬性和偵聽器
- Class與Style綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 進階篇
- 常用模塊
- 單文件組件
- 快速學會Vue Router路由
- Vue Route 進階使用
- Vuex 與狀態管理
- Axios
- Mock.js
- data數據顯示在頁面
- Vue生命周期
- Vue按需加載組件
- 國際化
- 頁面加載進度條 -NProgress
- 自定義主題顏色
- 開發篇
- Vue入門——創建并運行一個Vue項目
- Vue + Element UI 項目創建
- 使用Vue ui項目創建工具在網頁中創建Vue項目
- Vue項目創建入門實例
- Vue CLI
- 創建項目
- 使用Visual Studio Code 開發Vue項目
- 高級篇
- 組件深入
- Vue+Element
- Vue + ElementUI 主題顏色切換
- 工具篇
- 在線代碼編輯器
- 開發工具(IDE,集成開發環境)
- npm(JavaScript包管理工具)介紹
- Node.js(npm)在Windows下安裝
- webpack介紹
- webpack快速實例
- webpack
- 快速入門實例
- 安裝
- 概念
- Nodejs
- 基礎
- npm
- 命令參考
- 命令
- 模塊安裝
- Babel
- 問題解決篇
- ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version -marker
- Vue常見問題
- You are using the runtime-only build of Vue where the template compiler is not
- yarn 報unable to get local issuer certificate
- yarn There appears to be trouble with your network connection. Retrying
- Expected Boolean, got String with value "true".
- 項目篇
- 項目創建
- 項目設計
- 頁面
- 開發問題
- 后端
- Spring Boot + Activiti 工作流框架搭建之一
- Spring Boot + Activiti 工作流框架搭建之二
- 工作流
- Java流程框架
- Activiti
- 頁面風格
- green
- blue
- orange
- 參考篇
- 好的Git項目
- Vue的在線js
- 指令
- 開發說明
- JavaScript 高級
- export和import
- JS模塊化規范對比以及在Node.js的實現
- Storage
- ES2015
- scss
- CSS、Sass、SCSS