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

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

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

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

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

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

一、input輸入框綁定實(shí)例：

實(shí)現(xiàn)思路：

分別定義data下的name,age,like，作為其初始值，當(dāng)input輸入框內(nèi)的信息變化時(shí)，下面內(nèi)容會(huì)發(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>
<!--學(xué)生成績表-->
<div id="app" class="container">
   <div class=" col-xs-4 col-md-offset-4">
   <h2>個(gè)人信息</h2>

<div>姓名:<input type="text" v-model="name" class="form-control text-center" placeholder="請(qǐng)輸入你的個(gè)人信息">
   <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>個(gè)人信息</h2>

<div>姓名:<input type="text" v-model="name" class="form-control text-center" placeholder="請(qǐng)輸入你的個(gè)人信息">
   <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ù)據(jù)進(jìn)行同步，當(dāng)我們不想其更新太頻繁的時(shí)候，就可以選擇使用.lazy修飾符，就可以讓其更新頻率降低。此外input輸入內(nèi)容的類型均為字符格式，對(duì)于一些固定是數(shù)字的格式我們可以使用.number修飾符將其轉(zhuǎn)換為數(shù)字，方便運(yùn)算操作，不需要后期轉(zhuǎn)換類型。

`.lazy`

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

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

`.number`

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

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

這通常很有用，因?yàn)榧词乖?nbsp;type="number" 時(shí)，HTML 輸入元素的值也總會(huì)返回字符串。

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

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

添加.number修飾符后

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

`.trim`

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

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

未添加.trim屬性前（注意普通的html對(duì)空格不敏感一般默認(rèn)為一個(gè)，這里引入<pre></pre>標(biāo)簽）

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 輸入框類型為復(fù)選框

<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>) 并不會(huì)生效，應(yīng)用 v-model 來代替。

五、選擇框

1、單選

<hr>單選

   <select v-model="selecte">
      <option disabled value="">請(qǐng)選擇</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 渲染的動(dòng)態(tài)選項(xiàng)

<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指令的作用是什么

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

當(dāng)前名稱：Vue.js中v-model指令的作用是什么
文章鏈接：http://chinadenli.net/article46/ihiieg.html

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

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

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

.lazy

.number

.trim

`.lazy`

`.number`

`.trim`