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

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

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

1 .lazy

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

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

輸入框輸入的內(nèi)容，即使是數(shù)字，默認(rèn)也是 string 類型：

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

在此，我們可以使用 .number 修飾符讓其轉(zhuǎn)換為 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:{

    }
  }
)

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

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

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

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

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

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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