前端问题记录
安之ccy
非志无以成学
展开
-
js:contains函数
A.contains(B):A是否是B的父级,返回布尔值;若A=B,结果也为true<div id="test"> <div id="test1"> <div id="test2"> <div id="test3"></div> <div id="test4"></div> </div&g原创 2021-05-17 10:13:42 · 6172 阅读 · 2 评论 -
checkbox/select与v-model:将选择的内容存储到列表中
绑定复选框与contentType:<label v-for="c in blob.ctType" v-bind:key="c" > <input type="checkbox" name="ctType" :value="c" v-model="contentType"><label>{{c}}</label></label>看一眼contentType,初始是个空列表:data(){ return { blob原创 2021-05-16 15:56:07 · 269 阅读 · 2 评论 -
checkbox与v-for:解决“只显示框,不显示选择文字”
正常我们想要的复选框效果是一个框对应一个描述文字:<div> <input type="checkbox" name="test" value="123">123 <input type="checkbox" name="test" value="456">456 <input type="checkbox" name="test" value="789">789</div>效果:如果v-for直接加在input原创 2021-05-16 15:14:32 · 1671 阅读 · 3 评论 -
用vue的事件修饰符阻止冒泡
用mousemove事件举例1.传统做法:定义一个阻止冒泡的函数stop,形参为事件e,执行e.stopPropagation(),在标签上添加v-on:mousemove="stop"<div id="app"> <p v-on:mousemove="getPosition">输出鼠标位置:{{x}}/{{y}} <span v-on:mousemove.stop>不输出鼠标位置</span> </p>&原创 2021-04-28 14:06:32 · 1008 阅读 · 2 评论 -
用vue指令在input框默认输出指定字符串
使用v-bind指令,让input默认输出data中的name:<div id="app"> <input type="text" v-bind:value="name"></div>new Vue({ el:"#app", data:{ name:"ccy" } })效果:如果不用v-bind,用平常的双大括号,被双引号包裹,只会被当作字符串的:<input typ原创 2021-04-28 09:30:46 · 1159 阅读 · 2 评论 -
前端问题记录篇(一):input的高度问题
给input设置高度,但是总是不精确,设置了42px,但实际却是47.97px解决办法:给文本宽设置:box-sizing: border-box;原创 2021-03-31 09:49:51 · 273 阅读 · 0 评论 -
前端问题记录篇(二):平齐问题
给a标签设置inline-block,设置高度42px,input的高度调整为42px但没有水平齐平解决办法:给input添加css:vertical-align: top;原创 2021-03-31 09:53:10 · 160 阅读 · 2 评论 -
前端问题记录篇(三):jQ事件委托问题
当需要给动态生成的元素绑定事件时,需要考虑事件委托原因:绑定事件时,会搜索当前解析到的dom元素,将符合条件的dom元素绑定上事件但事件绑定如果先于元素新增的执行,就没有匹配到新增元素,新增的元素便不会被绑定到事件使用:父级元素.on(事件名, 需执行事件的子元素, 处理函数)例子:原本的页面:dom结构:<button class="add">+</button><div class="list"> <div class="item"&原创 2021-04-03 18:45:21 · 452 阅读 · 0 评论 -
前端问题记录篇(四):解决图片与div容器有间距的问题
div下包裹了一张img,div设置红色边框,没有手动设置padding、margin及其他定位从图片可以看到,img的下方离红色边框还有一段距离给图片添加:display: block;即可去掉底下的间距原创 2021-04-12 09:48:16 · 349 阅读 · 2 评论