Vue.js按键修饰符及v-model修饰符示例详解

 <div id="root">
        <input type="text" v-on:keyup="counter+=1">
        <p>在输入框输入了{{counter}}个字符</p>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                counter: 0
            },
            methods: {
            }
        })
    </script>

<!-- 只有在'key'是'enter'时调用'submit()'-->
<input v-on:keyup.enter="submit()">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

.enter => //enter键
.tab => //tab键
.delete (捕获"删除"和"退格"按键) => //删除键
.esc => //取消键
.space => //空格键
.up => //上
.down => //下
.left => //左
.right => //右

    <div id="root">
        <input type="text" v-model="content" v-on:keyup.enter="fun(content)">
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                content: ''
            },
            methods: {
                fun:function(data){
                    alert('录入内容为：'+data);
                    this.content='';
                }
            }
        })
    </script>

    <div id="root">
        <input type="text" v-model="content" v-on:keyup.113="fun(content)">
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                content: ''
            },
            methods: {
                fun:function(data){
                    alert('录入内容为：'+data);
                    this.content='';
                }
            }
        })
    </script>

    <div id="root">
        <input v-model.lazy="content">
        <div>{{content}}</div>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                content:"这是content"
            },
            methods: {
            }
        })
    </script>

    <div id="root"><br><br>
        <input v-model="content1">
        <div>【不加number修饰符】输入内容：{{content1}}</div>
        <div>【不加number修饰符】数据类型：{{typeof content1}}</div>
        <input v-model.number="content2">
        <div>【不加number修饰符】输入内容：{{content2}}</div>
        <div>【不加number修饰符】数据类型：{{typeof content2}}</div>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                content1:"这是content1",
                content2:"这是content2"
            },
            methods: {
            }
        })
    </script>

    <div id="root">
        <input v-model.trim="content">
        <div>输入内容：{{content}}</div>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                content:"content"
            },
            methods: {
            }
        })
    </script>