草庐IT

CSS之行内元素排列之间的缝隙问题及解决方案

1DOCTYPEhtml>2htmllang="en">3head>4metacharset="UTF-8"/>5metahttp-equiv="X-UA-Compatible"content="IE=edge"/>6metaname="viewport"content="width=device-width,initial-scale=1.0"/>7title>Documenttitle>8style>9*{10margin:0;11padding:0;12}13#wrap{14background-color:pink;15width:500px;16height:400px;17text

需求:vue 动态添加el-input

一、效果图二、实现逻辑将需要动态添加的表单项项的绑定值存为一个数组以循环的方式展示form表单点击`+`按钮触发事件,向数组中新加一个item点击`-`按钮触发事件,根据循环的得到的index来删除数组中相对应位置的item三、代码实现template>div>el-button@click="isDilogShow=true"plain>动态添加inputel-button>el-dialogtitle="特工安排":visible.sync="isDilogShow":close-on-click-modal="false"width="400px">el-formref="form":m

需求:vue+element-ui+sortable.js表格行和列拖拽(宽度自定义)

一、效果图二、代码实现注:需要安装依赖  pnpmisortablejs-Stemplate>divstyle="padding:15px">h3style="text-align:left;padding:10px;background:#ccc">vue+element-ui+sortable.js表格行和列拖拽h3>属性border可实现单元格拖拽获得字段宽度的改变--`@header-dragend`具体参考官网的方法-->el-tableref="dataTable":data="customColumnList"class="customer-table"borderrow-key

学习笔记——Vue条件渲染

2022-10-27 一、Vue的列表渲染(1)关键字:v-for(2)用法:v-for:"临时变量名in列表名"。“列表”的说明是写在script中的Vue中的data中。(3)扩展:在列表渲染中,渲染就是在前端能看见的。需要用到索引的用法。v-for:"(临时变量名,index)in列表名"使用实例:1DOCTYPEhtml>2htmllang="en">3head>4metacharset="UTF-8">5title>Titletitle>6scriptsrc="vue.js">script>7head>8body>9divid="app">10ul>11liv-for="hobbyi

学习笔记——Vue

2022-10-26Vue属性的基本操作一、绑定(1)单向绑定关键词:v-bind用法:v-bind:原属性名="数据模型的key值"例如:v-bind:href="username"(其中"username"中的说明放在“script”说明中)简写:可以省略“v-bind”,但是不能省略冒号。(2)双向绑定关键词:v-model用法:v-model:原属性名="数据模型的key值"例如:v-model:value="username"简写:可以省略“:value”,结果为:v-model="username",注意此处双向绑定的属性值默认为“value”。扩展:在双向绑定中,有一个“trim

学习笔记——Vue条件渲染

2022-10-27 一、Vue的列表渲染(1)关键字:v-for(2)用法:v-for:"临时变量名in列表名"。“列表”的说明是写在script中的Vue中的data中。(3)扩展:在列表渲染中,渲染就是在前端能看见的。需要用到索引的用法。v-for:"(临时变量名,index)in列表名"使用实例:1DOCTYPEhtml>2htmllang="en">3head>4metacharset="UTF-8">5title>Titletitle>6scriptsrc="vue.js">script>7head>8body>9divid="app">10ul>11liv-for="hobbyi

学习笔记——Vue

2022-10-26Vue属性的基本操作一、绑定(1)单向绑定关键词:v-bind用法:v-bind:原属性名="数据模型的key值"例如:v-bind:href="username"(其中"username"中的说明放在“script”说明中)简写:可以省略“v-bind”,但是不能省略冒号。(2)双向绑定关键词:v-model用法:v-model:原属性名="数据模型的key值"例如:v-model:value="username"简写:可以省略“:value”,结果为:v-model="username",注意此处双向绑定的属性值默认为“value”。扩展:在双向绑定中,有一个“trim

CSS画三角形,圆形,椭圆,圆角长方形

1、CSS画一个三角形:(div宽高为0,border存在且颜色不一)step1:  设置宽度,高度为0的一个div盒子;step2:  为了方便理解,将盒子的4个边框分别设置一样的宽度boder,不同的颜色;step3:  transparent将其他三个边框隐藏掉,就能看到效果了。 如果对三角形的样式有特殊要求: 可以通过动画效果来实现:transform:rotate(80deg)通过旋转实现2、圆形,椭圆,圆角长方形:  通过改变border-radius的比例,可以显示不同的图形,比如圆角正方形、圆角长方形 3、效果图:    4、代码:DOCTYPEhtml>htmllang="e

聊一聊js中元素定位的方法

在做seleniumweb自动化的时候,有时通过selenium定位不到,或无法操作元素,这个时候就需要通过js来定位/操作元素,然后通过selenium自带的execute_script()方法去执行js语句。下面介绍几种js的定位方法。一.IDid的值都是唯一的,所以当存在id字段时可优先使用DOCTYPEhtml>htmllang="en">head>metacharset="UTF-8">title>Titletitle>head>script>functiona(){alert(document.getElementById("button_id").style.display='b

复习 - ajax

复习呢有一个很直观的感受,就是以前学的东西,萌懂半懂的,这一来全部都清楚了,你以前以为你学的并不好但是复习一次把以前的案例一做,居然能够自己独立完成,知识点看着掌握的还不错。1.两天时间就把整个ajax复习完了,一天目前还暂时做不到哈哈,确实还是有很多案例都要思考一会,直接从案例下手吧,一个图书管理的案例,在这个案例里面吧就是用三个接口来获取图书,增加图书,删除图书,在js方面没多大问题,在html方面,还让我多熟悉了下vscode快速编程bootstrap,直接bs3,form-inline类名可以让每个表单项为行内块元素,table-hover可以增加表格的每一行悬停效果。获取图书列表:封