Vue.js中v-model指令修饰符的详细说明

1 .懒惰的

v-model指令默认加载输入事件中输入框的数据(中文输入法输入拼音的过程除外)。我们可以用。lazy lazy loader修饰符，仅在更改事件中重新加载输入框中的数据。

html:

Div id=' app '输入类型=' text' v-model.lazy=' content '占位符='请输入' value='初始值' pInput框：{{content}}/p/divjs:

var app=new Vue({ el: '#app '，data : { content : ' ' })；效果：

在使用。惰性惰性加载修改器，内容值只会在输入框失去焦点或按下回车键时更新。

2 .数字

默认情况下，输入框中输入的内容(偶数)为字符串类型：

在这里，我们可以使用。数字修饰符将其转换为数字类型——

html:

Div id=' app2 '输入类型=' number' v-model。number=' content' placeholder='请输入' pInput值：{{content}}，输入类型：{{typeof content}}/p/divjs:

var app2=new Vue({ el: '#app2 '，data : { content : 1 } })；效果：

3 .整齐

使用.trim `修饰符自动过滤掉输入框中的前导和尾随空格。

html:

Div id=' app3 '输入类型=' text' v-model.trim=' content '占位符='请输入' value='初始值' pInput框：{{content}}/p/divjs:

var app3=new Vue({ el: '#app3 '，data : { content : ' ' })；

上面的示例演示

PS:让我们通过代码来看看v-model指令及其修饰符

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title/head dydiv id=' app ' div输入类型=' text ' v-model=' name ' pre H2 { { name } }/H2/pre/div输入类型=' text ' v-model . lazy=' name ' pre H2 { { name } }/H2/pre/div输入类型=' text ' v-model . trim=' name ' pre 2 { { name } }/H2/pre/div/div script SRS./lib/vue . js '/script script src=' http : js/main . js '/script/body/html varapp=new vue({ El : ' # app '，data: {name:''}，

以上是边肖介绍的Vue.js中v-model指令修饰语的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！