VUE3（九）v-model

v-model的修饰符

lazy修饰符将input的@input事件修改为@change触发。

number将输入的字符串转化为数字。

trim去掉首尾的空白符号。

    <template id="my-app">
        <!-- 1.lazy修饰符 -->
        <!-- <input type="text" v-model.lazy="message"> -->
        <!-- 2.number修饰符 -->
        <!-- v-model默认为string类型 -->
        <!-- <input type="text" v-model.number="message">
        <h2>{{message}}</h2>
        <button @click="showType">查看类型</button> -->
        <!-- 3.trim修饰符 -->
        <input type="text" v-model.trim="message">
        <button @click="showResult">查看结果</button>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    message: "hello world"
                }
            },
            methods:{
                showType(){
                    console.log(this.message, typeof this.message);
                },showResult(){
                    console.log(this.message);
                }
            }
        };
        Vue.createApp(app).mount("#app");
    </script>