10.21课堂记录

表单绑定

修饰符

1-lazy绑定

<div id="app">
        <!-- 事件修饰符.lazy(懒惰)不会即时的将输入框的内容放入data -->
        <input v-model.lazy="msg">
        <span>{{ msg }}</span>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            e1: '#app',
            data: {
                msg: '111'
            }
        })
    </script>

02-number

<div id="app">
        <!-- 修饰符.number把string字符转为number数字 -->
        <input type="number" v-model.number="age">
        <span>{{ age }}</span>
        </div>

        <script src="../../vue.js"></script>
        
        <script>
            new Vue({
                el: '#app',
                data: {
                    age: ''
                },
                watch: {
                    age() {
                        console.log(typeof (this.age));
                    }
                }
            })
        </script>

03-trim

<div id="app">
        <!-- .trim屏蔽空格 -->
        <input type="text" v-model.trim="msg">
        <span>一个{{ msg.length }}个字符</span>
    </div>

    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:''
            }
        })
    </script>

文本绑定

<!--input(输入)类型：-->
    <!--type="text"（类型=文本）文本输入框，用于登录页面输入用户名。-->
    
    文本输入：<input type="text"><br>
    <!--type="password”（类型=密码）密码输入框，用于输入密码，显示*林*。-->
   
    输入密码：<input type="password"><br>
    <!--type="file”（类型=文件）上传文件处，用于文件的选择和上传。-->
    
    选择文件：<input type="file"><br>
    <!--type="checkbox"（类型=复选框）用于某项选择的打开或关闭。-->
    
    反复选择：<input type="checkbox"><br>
    <!--type="radio”(类型=发送)只能选择一次-->
    
    唯一选择：<input type="radio"><br>
    <!--type="image”（类型=图片）将图片定义为提交按钮-->
    
    图片提交：<input type="image”src=“图片路径"><br>
    <!--type="submit"(类型=提交)专门用于提交表单的button按钮-->
    
    提交按钮：<input type="submit"><br>
    <!--type="month”(类型=月份)定义year(年)和month(月)-->
    
    选择月份：<input type="month"><br>
    <!--type="number”（类型=数字）只能选择/输入数字-->
    
    选择数字：<input type="number"><br>
    <!--type="time”（类型=时间）定义分秒-->
    
    选择时间：<input type="time"><br>
    <!--type="week”(类型=周)定义年月周-->
    选择周：<input type="week">
    
    <script src="../vue.js"></script>

效果