Vue中v-model指令的常用修饰符

v-model指令有三个可以选用的修饰符:.lazy、.number以及.trim。vue官方对此的描述为:

  • .number-输入字符串转为有效的数字
  • .lazy-取代input监听change事件
  • .trim-输入首尾空格过滤

  官方链接:https://cn.vuejs.org/v2/api/#v-model

这三个修饰符的使用实例:(可尝试复制运行但需要正确的vue路径)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="div1">
        
        <input type="text" v-model.lazy="message">
        <h2>{{message}}h2>
        
        <input type="number" v-model.number="age">
        <h2>{{age}} {{typeof age}}h2>
        
        <input type="text" v-model.trim="trim">
        <h2>{{trim}}h2>
    div>
                
    <script src="vue.js">script>
    <script>
        const app = new Vue({
            el:'#div1',
            data:{
                message:'修饰符',
                age:20,
                trim:''
            },
            methods:{
                
            }
        })
    script>
body>
html>

 

你可能感兴趣的:(Vue中v-model指令的常用修饰符)