lovecoding
/
W260426


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-model 指令可以实现数据的双向绑定 -->
        <!-- 当输入框中的内容发生变化时 会自动更新到 msg 中的值中 -->
        <!-- 当 msg 中的值发生变化时  会自动更新到输入框中去 -->
        <!-- <input type="text" v-model="msg" @input="inputHandle"> -->
        <!-- <input type="text" v-model="msg" @change="changeHandle"> -->
        <!-- v-model 获取的值可以包含前后空格的 -->
        <!-- <input type="text" v-model="msg"> -->
         <!-- .trim 可以去掉字符串的前后空格 -->
        <!-- <input type="text" v-model.trim="msg"> -->

        <!-- v-model 默认获取的为字符串 -->
        <!-- <input type="text" v-model="msg"> -->
         <!-- .number 可以将输入的字符串转换为数字类型 -->
        <!-- <input type="text" v-model.number="msg"> -->

        <!-- .lazy v-model 可以实现懒加载  当文本框失去焦点时 才会更新到 msg 中的值中 （v-model才会工作） -->
        <input type="text" v-model.lazy="msg">


        <h1> 您输入的内容是：{{msg}}</h1>
        <button @click="getVal">按钮</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: ""
            },
            methods: {
                getVal() {
                    console.log(this.msg);
                    // this.msg = "hello";
                    console.log(typeof this.msg);
                    
                },
                // input事件 ：当文本框内的值发生变化的时候触发
                // inputHandle(){
                //     console.log("input事件触发");
                // },
                // change事件 ：当文本框失去焦点的时候触发
                // changeHandle(){
                //     console.log("change事件触发");
                // }
            }
        })
    </script>
</body>

</html>