Vue經常使用特性-表單基本操做和表單修飾符

1.表單基本操做

1. 1基於Vue的表單操做

   Input 單行文本

   textarea 多行文本

   select 下拉多選

   radio 單選框

   checkbox 多選框

    

    

 

 

• 獲取單選框中的值

  • 經過v-model

  <!-- 
          一、 兩個單選框須要同時經過v-model 雙向綁定 一個值 
          2、 每個單選框必需要有value屬性  且value 值不能同樣 
          三、 當某一個單選框選中的時候 v-model  會將當前的 value值 改變 data 中的 數據
  ​
          sex 的值就是選中的值，咱們只須要實時監控他的值就能夠了
      -->
               <input type="radio" id="male" value="1" v-model='sex'>
               <label for="male">男</label>
               <input type="radio" id="female" value="2" v-model='sex'>
               <label for="female">女</label>
  ​
  <script>
      new Vue({
           data: {
               // 默認會讓當前的 value 值爲 2 的單選框選中
                  sex: 2,  
              },
      })
  ​
  </script>

   

• 獲取複選框中的值

  • 經過v-model

  • 和獲取單選框中的值同樣

  • 複選框 checkbox 這種的組合時   data 中的 hobby 咱們要定義成數組 不然沒法實現多選

  <!-- 
          一、 複選框須要同時經過v-model 雙向綁定 一個值 
          2、 每個複選框必需要有value屬性  且value 值不能同樣 
          三、 當某一個單選框選中的時候 v-model  會將當前的 value值 改變 data 中的 數據
  ​
          hobby 的值就是選中的值，咱們只須要實時監控他的值就能夠了
      -->
  ​
  <div>
     <span>愛好：</span>
     <input type="checkbox" id="ball" value="1" v-model='hobby'>
     <label for="ball">籃球</label>
     <input type="checkbox" id="sing" value="2" v-model='hobby'>
     <label for="sing">唱歌</label>
     <input type="checkbox" id="code" value="3" v-model='hobby'>
     <label for="code">寫代碼</label>
   </div>
  <script>
      new Vue({
           data: {
                  // 默認會讓當前的 value 值爲 2 和 3 的複選框選中
                  hobby: ['2', '3'],
              },
      })
  </script>

   

• 獲取下拉框和文本框中的值

  • 經過v-model

   <div>
        <span>職業：</span>
         <!--
              一、 須要給select  經過v-model 雙向綁定 一個值 
              2、 每個option  必需要有value屬性  且value 值不能同樣 
              三、 當某一個option選中的時候 v-model  會將當前的 value值 改變 data 中的 數據
               occupation 的值就是選中的值，咱們只須要實時監控他的值就能夠了
          -->
         <!-- multiple  多選 -->
        <select v-model='occupation' multiple>
             <option value="0">請選擇職業</option>
             <option value="1">程序員</option>
             <option value="2">教師</option>
             <option value="3">公務員</option>
        </select>
           <!-- textarea 是 一個雙標籤   不須要綁定value 屬性的  -->
          <textarea v-model='desc'></textarea>
    </div>
  <script>
      new Vue({
           data: {
                  // 默認會讓當前的 value 值爲 2 和 3 的下拉框選中
                   occupation: ['2', '3'],
                   desc: 'nihao'
              },
      })
  </script>

  2.表單修飾符

  • .number  轉換爲數值

    • 注意點：

    • 當開始輸入非數字的字符串時，由於Vue沒法將字符串轉換成數值

    • 因此屬性值將實時更新成相同的字符串。即便後面輸入數字，也將被視做字符串。

  • .trim  自動過濾用戶輸入的首尾空白字符

    • 只能去掉首尾的 不能去除中間的空格

  • .lazy   將input事件切換成change事件

    • .lazy 修飾符延遲了同步更新屬性值的時機。即將本來綁定在 input 事件的同步邏輯轉變爲綁定在 change 事件上

  • 在失去焦點 或者 按下回車鍵時才更新

    <!-- 自動將用戶的輸入值轉爲數值類型 -->
    <input v-model.number="age" type="number">
    ​
    <!--自動過濾用戶輸入的首尾空白字符   -->
    <input v-model.trim="msg">
    ​
    <!-- 在「change」時而非「input」時更新 -->
    <input v-model.lazy="msg" >
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    age: '',
                    info: '',
                    msg: ''
                },
                methods: {
                    handel: function () {
                        // console.log(this.age + 13);
                        console.log(this.info.length);
                    }
                }
            })
        </script>