自學Vue必看的v-model知識總結(超詳細)

基本概念

表單控件在實際開發中是很常見的,Vue中使用v-model指令來實現表單元素和數據的雙向綁定

基本使用

最重要的特徵是表單元素和數據的雙向綁定

<body>
  <div id="app">
    <input type="text" v-model="message">
    {{message}}
  </div> 
  
<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      message:"hello world"
    }
  })
</script>
</body>

在這裏插入圖片描述

v-model原理

  1. 實現雙向綁定的原理 相當於兩個指令的集合。分別是v-onv-bind
  2. v-model其實是一個語法糖,它本質上包含兩個操作:
    (1)v-bind綁定一個Value屬性
    (2)v-on指令給當前元素綁定input事件

使用v-bind

只使用v-bind只能實現數據響應

<body>
  <div id="app">
    //<!-- 只使用v-bind-->
    <input type="text" :value="message" >
    {{message}}

  </div> 
  

<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      message:"hello world"
    }
  })
</script>
</body>

在這裏插入圖片描述

v-bind和v-on同時使用

v-bindv-on同時使用與v-model效果相同
(1)當輸入框輸入內容時,因爲input中的v-model綁定了message,所以會實時將輸入的內容傳遞給message,message發生改變
(2)message發生改變時,因爲使用了Mustache語法,於是將message的值插入到DOM中,DOM發生響應的改變

<body>
  <div id="app">
    //<!-- @input監聽用戶輸入-->
    <input type="text" :value="message" @input="change"> 
    <input type="text" :value="message" @input="message =  $event.target.value">
  </div> 

<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      message:"hello world"
    },
    methods:{
    //事件對象
      change(event) {
        this.message = event.target.value;
      }
    }
  })
</script>
</body>

v-model結合radio使用

具體詳解請看註釋

<body>
  <div id="app">
    //<!-- 可以省略name -->
    <label for="man">
      <input type="radio" id="man" value="男" v-model="sex"></label>
    <label for="woman">
      <input type="radio" id="woman" value="女" v-model="sex"></label>
    <h2>您的選擇是:{{sex}}</h2>    
  </div> 
 
<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      //默認選中。也可以沒有默認選中,則爲空
     sex:"男"
    },
  })
</script>

在這裏插入圖片描述

v-model結合checkbox使用

單選框

具體詳解請看註釋

<body>
  <div id="app">
    //<!-- 單選框 -->
    <label for="agreement">
      <input type="checkbox" name="" id="agreement" v-model="isagree">同意協議
    </label>
    <h2>您選擇的是:{{isagree}}</h2>
    //動態綁定disabled屬性
    <button :disabled="!isagree">下一步</button>
    <br>
  </div> 
  

<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
    //設置默認值
     isagree:false
    },
  })
</script>
</body>

在這裏插入圖片描述

多選框

<body>
  <div id="app">
    //<!-- 多選框 -->
      <input type="checkbox" value="籃球" v-model="hobbies">籃球
      <input type="checkbox" value="足球" v-model="hobbies">足球
      <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <h2>您的愛好選擇是:{{hobbies}}</h2>
  </div> 
  

<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
    //可以設置默認值
      hobbies:["足球"]
    }
  })
</script>
</body>

在這裏插入圖片描述

v-model結合select使用

selectcheckbox 相類似,同樣有單選和多選的區別

<body>
  <div id="app">
   // <!-- 單選 -->
    <select name="habit" v-model="hobby">
      <option value="籃球" >籃球</option>
      <option value="足球" >足球</option>
      <option value="羽毛球">羽毛球</option>
    </select>
    <h2>您最喜歡的運動是:{{hobby}}</h2>

   // <!-- 多選 -->
    <select name="habit" v-model="hobbies" multiple >
      <option value="籃球" >籃球</option>
      <option value="足球" >足球</option>
      <option value="羽毛球">羽毛球</option>
    </select>
    <h2>您最喜歡的運動有:{{hobbies}}</h2>
  </div> 
  

<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      hobby:'',
      //可以設置默認值
      hobbies:["足球"]
    }
  })
</script>
</body>

在這裏插入圖片描述

值綁定

值綁定就是動態地給value賦值。
在上面的例子中,inputvalue值都是在定義input的時候直接給定的。但在真實開發中,這些value值可能是從網絡後臺上獲取或定義在data中的。所以我們就需要通過v-bind:value動態地給value賦值,看例子

<body>
  <div id="app">
    <span v-for="hobby in arr">
      <input  type="checkbox" :value="hobby" :id="hobby" v-model="hobbies" >{{hobby}}
    </span>  
    <h2>您最喜歡的運動有:{{hobbies}}</h2>
  </div> 
  
<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
    //數據由data定義
      arr:["足球","籃球","羽毛球"],
      hobbies:[]
    }
  })
</script>
</body>

在這裏插入圖片描述

v-model修飾符

lazy修飾符

(1)默認情況下,v-model默認是在input事件中同步輸入框的數據的,即一旦有數據發生改變時,對應的data中的數據就會自動發生改變
(2)lazy修飾符可以讓數據在失去焦點或者回車時纔會更新

<body>
  <div id="app">
  	//未使用修飾符
    <input type="text" v-model="message1"> 
    <h2>{{message1}}</h2>
    //使用修飾符
    <input type="text" v-model.lazy="message2"> 
    <h2>{{message2}}</h2>
  </div> 
  
<script src="../vue.js"></script>
<script
  var app = new Vue({
    el:'#app',
    data:{
      message1:"hello1",
      message2:"hello2"
    }
  })
</script>
</body>

在這裏插入圖片描述

number修飾符

(1)默認情況下,在輸入框中無論我們輸入的時字母還是數字,都會被當作字符串類型進行處理
(2)如果我們希望處理的是數字類型,那麼最好直接將內容當作數字處理
(3)number修飾符可以讓在輸入框中輸入的內容自動轉成數字類型

<body>
  <div id="app">
	//未使用修飾符
    <input type="number"  v-model="num1">
    <h2>{{num1}}-{{typeof num1}}</h2>
    //使用修飾符
    <input type="number"  v-model.number="num2">
    <h2>{{num2}}-{{typeof num2}}</h2>

  </div> 
  

<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      num1:0,
      num2:0
    }
  })
</script>
</body>

在這裏插入圖片描述

trim修飾符

(1)如果輸入的內容首尾有很多空格,通常我們希望將其去除
(2)trim修飾符可以過濾內容左右兩邊的空格

<body>
  <div id="app">
	//未使用修飾符
    <input type="text" v-model="name1">
    <h2>{{name1}}</h2>
    //使用修飾符
    <input type="text" v-model.trim="name2">
    <h2>{{name2}}</h2>

  </div> 
  

<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      name1:'',
      name2:''
    }
  })
</script>
</body>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章