正文

vue2.0学习—收集表单数据（四十三）(代码片段)

王同学要努力  王同学要努力  2022-12-10  387

关键词：

【Vue2.0学习】— 收集表单数据（四十三）

v-model的三个修饰符：

lazy：失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤

<body>
    <div id="root">
        <form @submit.prevent="demo">
            <!-- 去掉前后空格trim -->
            账号：<input type="text" v-model.trim="userinfo.account">
            <br> 密码：
            <input type="password" v-model="userinfo.password"><br> 年龄：
            <input type="number" v-model.number="userinfo.age"> <br>性别：
            <input type="radio" name="sex" checked v-model="userinfo.sex" value="male">男
            <input type="radio" name="sex" v-model="userinfo.sex" value="female">女
            <br>爱好:

            <input type="checkbox" v-model="userinfo.hobby" value="smoke">抽烟
            <input type="checkbox" v-model="userinfo.hobby" value="drink">喝酒
            <input type="checkbox" v-model="userinfo.hobby" value="hair">烫头
            <br> 所属校区：
            <select name="school" id="">
                <option value="北京" name="北京">--请选择校区--</option>
                <option value="北京" name="北京">北京</option>
            <option value="上海">上海</option>
            <option value="天津">天津</option>
            </select>
            <br> 其他信息:
            <textarea v-model.lazy="userinfo.other">

            </textarea>
            <br>
            <input type="checkbox" v-model="userinfo.agree"> 阅读并接受阅读协议：
            <a href="http://www.baidu.com">《用户协议》</a>
            <br>
            <button>提交</button>

        </form>
    </div>
    <script>
        const vm = new Vue(
            el: '#root',
            data: 
                userinfo: 
                    account: '',
                    password: '',
                    hobby: [],
                    age: '',
                    sex: 'felmal',
                    city: '北京',
                    other: '',
                    agree: ''
                
            ,
            methods: 
                demo() 
                    console.log(JSON.stringify(this.userinfo));

                
            
        )
    </script>
</body>

vue2.0学习—列表过滤（四十）(代码片段)

【Vue2.0学习】—列表过滤（四十）数据监视实现：<divid="root"><h2>人员列表</h2><inputtype="text"placeholder="请输入名字"v-model="keyWord"> 查看详情

vue2.0学习—列表排序（四十一）(代码片段)

【Vue2.0学习】—列表排序（四十一）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content=&# 查看详情

vue2.0学习—过滤器（四十四）(代码片段)

【Vue2.0学习】—过滤器（四十四）<divid="root"><h2>显示格式化后的时间</h2><h4>现在是:fmtTime</h4><h4>现在是:getTime()</h4&g 查看详情

vue2.0学习—键盘事件（三十三）(代码片段)

【Vue2.0学习】—键盘事件（三十三）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content=&# 查看详情

vue2.0学习—自定义指令（四十九）(代码片段)

【Vue2.0学习】—自定义指令（四十九）需求：需求1:定义一个v-big指令，和v-text功能相似，但会把绑定的数值放大10倍需求2:定义一个v-fbind指令，和v-bind功能相似，但可以让其绑定的input元素默认获取焦... 查看详情

vue2.0学习—v-pre指令（四十八）(代码片段)

【Vue2.0学习】—v-pre指令（四十八）v-pre指令跳过其所在节点的编译过程可利用它跳过，没有使用指令语法，没有使用插值语法的节点，会加快编译<divid="root"><h2v-pre>Vue其实很简单</h2><h2... 查看详情

vue2.0学习—v-text指令（四十五）(代码片段)

【Vue2.0学习】—v-text指令（四十五）v-text指令：作用：向其所在的节点中渲染文本内容与插值语法的区别：v-text会替换掉节点中的内容，XX不会<divid="root"><h2>你好，name</h2><h2v-tex 查看详情

vue2.0学习—v-html指令（四十六）(代码片段)

【Vue2.0学习】—v-html指令（四十六）知识储备：cookie简略图示v-html指令：作用：向指定节点中渲染包含html结构中的内容与插值语法的区别：v-html会替换掉节点中所有的内容XX不会v-html可以识别html结构严重... 查看详情

学习四十三(代码片段)

12.1LNMP架构介绍12.2MySQL安装12.3/12.4PHP安装12.5Nginx介绍扩展Nginx为什么比ApacheHttpd高效：原理篇http://www.toxingwang.com/linux-unix/linux-basic/1712.htmlapache和nginx工作原理比较http://www.server110.com/nginx/201402/6543.htmlm 查看详情

vue2.0学习—v-cloak指令（四十七）(代码片段)

【Vue2.0学习】—v-cloak指令（四十七）v-cloak指令：本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性使用css配合v-cloak可以解决网速慢时页面展示出XXX的问题本小结知识点补充属性选择器&... 查看详情

vue2.0学习—ref属性（五十三）(代码片段)

【Vue2.0学习】—ref属性（五十三）ref属性被用来给元素或子组件这些引用信息（id的替代者）应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件的实例对象(vc)使用方式：打标识：<h1ref... 查看详情

vue2.0—表单事件数据绑定(代码片段)

【Vue2.0】—表单事件数据绑定（六）<body><divid="root"><formaction=""@submit.prevent="demo"><labelfor="TW">姓名：</lab 查看详情

vue2.0—props配置（十三）(代码片段)

...43;1</h2><button@click="changeAge">点我修改数据</button></div></template><script>exportdefaultname:'Student',data()returnmsg:'王者爱好者',myage:this.age,methods:changeAge()this.myage=24,//简单接收//props:['nam... 查看详情

vue2.0—github小案例（二十三）(代码片段)

...()returnkeyWord:'',methods:sendData()//请求前更新List里面的数据this.$bus.$emit('updateListData&# 查看详情

leetcode刷题四十三(代码片段)

leetcode刷题四十三题目叙述https://leetcode-cn.com/problems/number-of-recent-calls/写一个RecentCounter类来计算特定时间范围内最近的请求。请你实现RecentCounter类：RecentCounter()初始化计数器，请求数为0。intping(intt)在时间t添加一个新请求，其中... 查看详情

salesforce零基础学习（四十三）运算取余

工作中遇到一个简单的小问题，判断两个数是否整除，如果不整除，获取相关的余数。习惯java的我毫不犹豫的写下了代码publicBooleanisDivisibility(Integerdividend,Integerdivider){returndividend%divider==0;}提交代码发现竟然提交不上？？后来查... 查看详情

vue教程(四十三)路由嵌套(代码片段)

Vue教程(四十三)路由嵌套路由懒加载：当打包构建应用时,Javascript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了懒加载语法... 查看详情