Vue.js中v-model指令的作用是什么

Vue.js中v-model指令的作用是什么，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

目前創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網站建設、域名、網站空間、網站運營、企業(yè)網站設計、錦江網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

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

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

一、input輸入框綁定實例：

實現(xiàn)思路：

分別定義data下的name,age,like，作為其初始值，當input輸入框內的信息變化時，下面內容會發(fā)生變化，并更改data下的值。

Vue.js中v-model指令的作用是什么

全部代碼：
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--學生成績表-->
<div id="app" class="container">
   <div class=" col-xs-4 col-md-offset-4">
   <h2>個人信息</h2>

<div>姓名:<input type="text" v-model="name" class="form-control text-center" placeholder="請輸入你的個人信息">
   <pre>{{ name }}</pre>
   </div>
      <div>年齡:<input type="text" v-model="age" class="form-control text-center" placeholder="年齡">
         <span>{{   age }}</span>
      </div>
      <div>愛好:<input type="text" v-model="like" class="form-control text-center" placeholder="愛好">
         <span>{{   like }}</span>
      </div>
</div>

</div>




<script>
 var app  = new  Vue({
      el:"#app",
 data:{
         name:"李四",
 age:24,
 like:"跑步"
 },
 computed:{
         sum: function () {
            return  this.math + this.physics + this.english

 },
 average:function () {
            return Math.round((this.sum/3))

         }
      }
   })


</script>




</body>
</html>

核心代碼：
<div id="app" class="container">
   <div class=" col-xs-4 col-md-offset-4">
   <h2>個人信息</h2>

<div>姓名:<input type="text" v-model="name" class="form-control text-center" placeholder="請輸入你的個人信息">
   <pre>{{ name }}</pre>
   </div>
      <div>年齡:<input type="text" v-model="age" class="form-control text-center" placeholder="年齡">
         <span>{{   age }}</span>
      </div>
      <div>愛好:<input type="text" v-model="like" class="form-control text-center" placeholder="愛好">
         <span>{{   like }}</span>
      </div>
</div>

</div>

<script>
   var app  = new  Vue({
      el:"#app",
      data:{
         name:"李四",
         age:24,
         like:"跑步"
      },

   })

</script>

v-model的修飾符

input事件觸發(fā)后將輸入框的值與數(shù)據進行同步，當我們不想其更新太頻繁的時候，就可以選擇使用.lazy修飾符，就可以讓其更新頻率降低。此外input輸入內容的類型均為字符格式，對于一些固定是數(shù)字的格式我們可以使用.number修飾符將其轉換為數(shù)字，方便運算操作，不需要后期轉換類型。

`.lazy`

在默認情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據進行同步 (除了上述輸入法組合文字時)。你可以添加 lazy 修飾符，從而轉變?yōu)槭褂?nbsp;change 事件進行同步：

<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg" >

`.number`

如果想自動將用戶的輸入值轉為數(shù)值類型，可以給 v-model 添加 number 修飾符：

<input v-model.number="age" type="number">

這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。

在data定義的age為×××的數(shù)字，當我們重新輸入內容時，發(fā)現(xiàn)其變?yōu)樽址愋?，這時我們可以加上.number的修飾符

Vue.js中v-model指令的作用是什么

添加.number修飾符后

Vue.js中v-model指令的作用是什么

`.trim`

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

<input v-model.trim="msg">

未添加.trim屬性前（注意普通的html對空格不敏感一般默認為一個，這里引入<pre></pre>標簽）

Vue.js中v-model指令的作用是什么

添加其修飾符后

Vue.js中v-model指令的作用是什么

二、input 輸入框類型為單選框

<h3>性別</h3>
<label>男：
   <input type="radio"   v-model="sex" value="male"  class="">
</label>


<label>女
   <input type="radio"   v-model="sex"  value="female" ></label>
<hr>
 性別：{{ sex }}
 
 <script>
   var app  = new  Vue({
      el:"#app",
      data:{
         name:"李四",
         age:24,
         like:"跑步",
         sex:'female'
      },
   })

</script>

Vue.js中v-model指令的作用是什么

三、input 輸入框類型為復選框

<h3>愛好：</h3>
<label class="btn btn-default">跑步
   <input type="checkbox"   v-model="like" value="跑步"  >
</label class="btn btn-default">
<label class="btn btn-default">爬山
   <input type="checkbox"   v-model="like" value="爬山" >
</label >
<label class="btn btn-default">閱讀
   <input type="checkbox"   v-model="like" value="閱讀" >
</label>
<label class="btn btn-default">游泳
   <input type="checkbox"   v-model="like" value="游泳"  >
</label class="btn btn-default">
<label class="btn btn-default">逛街
   <input type="checkbox"   v-model="like" value="逛街" >
</label >
<label class="btn btn-default">健身
   <input type="checkbox"   v-model="like" value="健身" >
</label>

<hr>
愛好：{{ like }}

<script>
   var app  = new  Vue({
      el:"#app",
      data:{
         name:"李四",
         age:24,
         info:"長江后浪推前浪",
         sex:'female',
         like:[]

      },
   })

</script>

Vue.js中v-model指令的作用是什么

四、多行文本textarea

多行文本
{{msg}}

<script>
   var app  = new  Vue({
      el:"#app",
      data:{
         name:"李四",
         age:24,
         info:"長江后浪推前浪",
         sex:'female',
         like:[],
         msg:"多行文本"

      },
   })

</script>

Vue.js中v-model指令的作用是什么

在文本區(qū)域插值 (<textarea></textarea>) 并不會生效，應用 v-model 來代替。

五、選擇框

1、單選

<hr>單選

   <select v-model="selecte">
      <option disabled value="">請選擇</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
   </select>
   <span>Selected: {{ selecte }}</span>

<hr>
<script>
   var app  = new  Vue({
      el:"#app",
      data:{
         name:"李四",
         age:24,
         info:"長江后浪推前浪",
         sex:'female',
         like:[],
         msg:"多行文本",
         selecte:'',
         selected:[]

      },
   })

</script>

Vue.js中v-model指令的作用是什么

2、多選

<hr>
<select v-model="selected" multiple style="width: 50px;">
   <option>A</option>
   <option>B</option>
   <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
<script>
   var app  = new  Vue({
      el:"#app",
      data:{
         name:"李四",
         age:24,
         info:"長江后浪推前浪",
         sex:'female',
         like:[],
         msg:"多行文本",
         selected:[]

      },
   })

</script>

Vue.js中v-model指令的作用是什么

用 v-for 渲染的動態(tài)選項

<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' }
    ]
  }
})

Vue.js中v-model指令的作用是什么

看完上述內容，你們掌握Vue.js中v-model指令的作用是什么的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當前名稱：Vue.js中v-model指令的作用是什么
文章鏈接：http://muchs.cn/article46/ihiieg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站改版、App設計、網站內鏈、全網營銷推廣、品牌網站設計、做網站

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容