vue基礎---表單輸入綁定

【一】基礎用法

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

    注意：v-model 會忽略所有表單元素的 value、checked、selected 特性初始值而總是將 Vue 實例的數據作為數據來源。所以應該通過 JavaScript 在組件的 data 選項中聲明初始值。

    <form id="ti_jiao" v-on:submit.prevent="onSubmit">
        <input type="text" v-model:value="input_info" value="我是默認值"><br />
        性別：<input type="checkbox" v-model:checked="check_status" checked="checked"><br>
        <select>
            <option>選項1</option>
            <option v-model:selected="selected">選項2</option>
            <option>選項3</option>
        </select>
        <p>輸入數據為：{{input_info}}</p>
        <input type="submit" value="提交">
    </form>
    <script type="text/javascript">
        var ti_jiao = new Vue({
            el:"#ti_jiao",
            data:{
                input_info:"",
                check_status:false,
                selected:'selected'
            },
            methods:{
                onSubmit:function(){
                    alert(6)
                }
            }
        })
    </script>

結果：

    此時會看到，HTML中設置的初始值會被忽略，即v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。

    另外，option默認選中無效，所以接下來研究下（稍后介紹）

    另外，v-model 在內部使用不同的屬性為不同的輸入元素並拋出不同的事件：

text 和 textarea 元素使用 value 屬性和 input 事件；
checkbox 和 radio 使用 checked 屬性和 change 事件；
select 字段將 value 作為 prop 並將 change 作為事件。

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

    基礎用法-（1）文本

    <form id="ti_jiao" v-on:submit.prevent="onSubmit">
        <input type="text" v-model:value="input_info" value="我是默認值" placeholder="edit">
        <p>輸入數據為：{{input_info}}</p>
        <input type="submit" value="提交">
    </form>
    <script type="text/javascript">
        var ti_jiao = new Vue({
            el:"#ti_jiao",
            data:{
                input_info:""
            }
        })
    </script>

    此時會發現，v-model會忽略表單元素的value初始值，而將vue數據實例作為數據來源。一般通過js在組件中的data選項中聲明初始值。

    基礎用法-（2）多行文本

    <form id="ti_jiao" v-on:submit.prevent="onSubmit">
        單行文本：
        <input type="text" v-model:value="input_info" value="我是默認值" placeholder="edit">
        <p>輸入數據為：{{input_info}}</p>
        <hr>
        多行文本：
        <textarea v-model:value="text_info">{{text_info}}</textarea>
        <p>輸入數據為：{{text_info}}</p>
        <hr>
        <input type="submit" value="提交">
    </form>
    <script type="text/javascript">
        var ti_jiao = new Vue({
            el:"#ti_jiao",
            data:{
                input_info:"",
                text_info:"多行文本輸入框默認值"
            }
        })
    </script>

    注意：直接在文本區域插值 (<textarea></textarea>) 並不會生效，應用 v-model 來設置。

    基礎用法-（3）復選框

單個復選框：<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>

data中
checked:true

 　　多個復選框，綁定到同一個數組：

 多個復選框：
    <input type="checkbox" id="class1" value="一年級" v-model="checkedNames">
    <label for="class1">一年級</label>
    <input type="checkbox" id="class2" value="二年級" v-model="checkedNames">
    <label for="class2">二年級</label>
    <input type="checkbox" id="class3" value="三年級" v-model="checkedNames">
    <label for="class3">三年級</label>
    選中列表：{{checkedNames}}

data中：
checkedNames:[]

   基礎用法-（4）單選按鈕

單選框：
            性別：
            <input type="radio" name="sex" id="man" value="男性" v-model="radioValue">
            <label for="man">男</label>
            <input type="radio" name="sex" id="woman" value="女性" v-model="radioValue">
            <label for="woman">女</label>
            選中選項：{{radioValue}}

date中：
radioValue:''

    基礎用法-（4）選擇框

選擇框：
   <select v-model="selected">
        <option disabled="disabled" value="">請選擇城市</option>
        <option>石家庄</option>
        <option>衡水</option>
        <option>張家口</option>
   </select>
   所選城市：{{selected}}

data中：
selected:''

    推薦像上面這樣提供一個值為空的禁用選項

  

    多選時 (綁定到一個數組)：

        選擇框：
            <select v-model="selected" multiple>
                <option disabled="disabled" value="">請選擇城市</option>
                <option>石家庄</option>
                <option>衡水</option>
                <option>張家口</option>
            </select>
            所選城市：{{selected}}
        <hr>

data中：
selected:[]

    用 v-for 渲染的動態選項：

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

 

【二】值綁定

    對於單選按鈕，復選框及選擇框的選項，v-model 綁定的值通常是靜態字符串 (對於復選框也可以是布爾值)

    單選按鈕

單選按鈕：
        <!-- 當選中時，`radio_status` 為字符串 "男性/女性" -->
        男：<input type="radio" v-model="radio_status" name="sex" value="男性">
        女：<input type="radio" v-model="radio_status" name="sex" value="女性">
        <p>單選值為:{{radio_status}}</p>

data中：
radio_status:''

   單個多選按鈕：

單個多選按鈕：
        <!-- `like_status` 為‘’，返回true/false --> 
        愛好：
        游泳<input type="checkbox" name="like" v-model="like_status" value="游泳">
        <p>多選值為：{{like_status}}</p>

data中：
like_status:''

    多個多選按鈕：

多個多選按鈕：
        <!-- `like_status` 為[]，返回所選值value --> 
        愛好：
        游泳<input type="checkbox" name="like" v-model="like_status" value="游泳">
        爬山<input type="checkbox" name="like" v-model="like_status" value="爬山">
        輪滑<input type="checkbox" name="like" v-model="like_status" value="輪滑">
        <p>多選值為：{{like_status}}</p>

data中：
like_status:[]

  

    選擇框：

選擇框:
       <!-- 當選中第一個選項時，`select_option` 為字符串 "選項一" -->
       <select v-model="select_option">
            <option value="選項一">選項一</option>
            <option value="選項二">選項二</option>
       </select>
       <p>選擇框選擇：{{select_option}}</p>

data中：
select_option:[]

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

 值綁定-（1）復選框

<input type="checkbox" name="like" v-model="like_status" true-value="yes" false-value="no">

data中：
like_status:''

    這里的 true-value 和 false-value 特性並不會影響輸入控件的 value 特性，因為瀏覽器在提交表單時並不會包含未被選中的復選框。如果要確保表單中這兩個值中的一個能夠被提交，(比如“yes”或“no”)，請換用單選按鈕。

值綁定-（2）單選按鈕

<!-- 被選中時，radio_status為vm.man_info或者vm.woman_info -->
男：<input type="radio" v-model="radio_status" name="sex" v-bind:value="man_info" value="男性">
女：<input type="radio" v-model="radio_status" name="sex" v-bind:value="woman_info" value="女性">
<p>單選值為:{{radio_status}}</p>

data中：
man_info:"男性相關信息",
woman_info:"女性相關信息"

值綁定-（3）選擇框

<select v-model="select_option">
     <option value="選項一" :value="info1">選項一</option>
     <option value="選項二" :value="info2">選項二</option>
</select>

data中：
info1:"選項一相關數據",
info2:"選項二相關數據"

 

【三】修飾符

    在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 

姓名：<input type="text" v-model="name_value" name="">
<p>姓名輸入為：{{name_value}}</p>

data中：
name_value:''

    （1）.lazy（懶）修飾符

    可以添加 lazy 修飾符，從而轉變為使用 change事件進行同步：

姓名：<input type="text" v-model.lazy="name_value" name="">
<p>姓名輸入為：{{name_value}}</p>

    此時，當輸入框輸入數據時無法再進行動態實時更新，只有失焦時才會更新數據

    （2）.number修飾符

    如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符。也可以進行串聯

年紀：<input type="number" v-model.lazy.number="age_value" v-on:blur="add">

methods中：
add:function(){
        console.log(this.age_value+6)
}

結果：

  

   此時會將輸入框的數據轉換為number數字，從而可以直接進行運算。這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat() 解析，則會返回原始的值。

    （3）.trim（修改/整）修飾符

    如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：

姓名：<input type="text" v-model.lazy.trim="name_value">
<p>姓名輸入為：{{name_value}}</p>

 

【三】組件上使用v-model（待驗證）

    HTML 原生的輸入元素類型並不總能滿足需求。幸好，Vue 的組件系統允許你創建具有完全自定義行為且可復用的輸入組件。這些輸入組件甚至可以和 v-model 一起使用！要了解更多，請參閱組件指南中的自定義輸入組件。

 

 

 

 

 

.