Vue.js中v-model指令修飾符有什么用

發(fā)布時(shí)間：2022-05-06 13:47:50 來源：億速云閱讀：195 作者：iii 欄目：大數(shù)據(jù)

這篇文章主要介紹了Vue.js中v-model指令修飾符有什么用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue.js中v-model指令修飾符有什么用文章都會(huì)有所收獲，下面我們一起來看看吧。

1 .lazy

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

html：

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

js：

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

效果：

Vue.js中v-model指令修飾符有什么用

使用 .lazy 懶加載修飾符之后，只有在輸入框失去焦點(diǎn)或者按回車鍵時(shí)才會(huì)更新 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="請(qǐng)輸入" >
  <p>輸入值：{{content}}，輸入類型：{{typeof content}}</p>
</div>

js：

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

效果：

Vue.js中v-model指令修飾符有什么用

3 .trim

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

html：

<div id="app3">
  <input type="text" v-model.trim="content" placeholder="請(qǐng)輸入" 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:{

    }
  }
)

關(guān)于“Vue.js中v-model指令修飾符有什么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue.js中v-model指令修飾符有什么用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

Vue.js中v-model指令修飾符有什么用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽