Vue.js中v-model指令修飾符的作用是什么-創(chuàng)新互聯(lián)

Vue.js中 v-model 指令修飾符的作用是什么，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

安新ssl適用于網站、小程序/APP、API接口等需要進行數據傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

1 .lazy

v-model 指令默認會在 input 事件中加載輸入框中的數據（中文輸入法中輸入拼音的過程除外）。我們可以使用 .lazy 懶加載修飾符，讓其只在 change 事件中再加載輸入框中的數據。

html：

<div id="app">
  <input type="text" v-model.lazy="content" placeholder="請輸入" value="初始值">
  <p>輸入框：{{content}}</p>
</div>

js：

var app = new Vue({
  el: '#app',
  data: {
    content: ''
  }
});

效果：

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

使用 .lazy 懶加載修飾符之后，只有在輸入框失去焦點或者按回車鍵時才會更新 content 值。

2 .number

輸入框輸入的內容，即使是數字，默認也是 string 類型：

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

在此，我們可以使用 .number 修飾符讓其轉換為 number 類型——

html：

<div id="app2">
  <input type="number" v-model.number="content" placeholder="請輸入" >
  <p>輸入值：{{content}}，輸入類型：{{typeof content}}</p>
</div>

js：

var app2 = new Vue({
  el: '#app2',
  data: {
    content: 1
  }
});

效果：

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

3 .trim

使用 ·.trim` 修飾符可以自動過濾掉輸入框的首尾空格。

html：

<div id="app3">
  <input type="text" v-model.trim="content" placeholder="請輸入" value="初始值">
  <p>輸入框：{{content}}</p>
</div>

js：

var app3 = new Vue({
  el: '#app3',
  data: {
    content: ''
  }
});

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

以上示例 DEMO

PS：下面通過代碼看下v-model指令及其修飾符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <div>
    <input type="text" v-model="name">
    <pre><h3>{{name}}</h3></pre>
  </div>
  <div>
    <input type="text" v-model.lazy="name">
    <pre><h3>{{name}}</h3></pre>
  </div>
  <div>
    <input type="text" v-model.trim="name">
    <pre><h3>{{name}}</h3></pre>
  </div>
</div>
<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>

var app = new Vue(
  {
    el:"#app",
    data:{
      name:""
    },
    methods:{

    }
  }
)

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

當前題目：Vue.js中v-model指令修飾符的作用是什么-創(chuàng)新互聯(lián)
瀏覽地址：http://jinyejixie.com/article18/cchhdp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供全網營銷推廣、Google、搜索引擎優(yōu)化、企業(yè)建站、做網站、服務器托管

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

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

Vue.js中v-model指令修飾符的作用是什么-創(chuàng)新互聯(lián)