制作一个计算器效果图如下: 一言不合上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Calculator</title> <style> /* 主体 */ .counter { width: 396px; height: 486px; background-co
2024-11-23Layout 布局组件主要是为了让我们快速构建出页面的整体框架 . 在 ElementUI 中 , 布局组件将页面划分成了多个行 , 每行最多分为 24 列 . 通过基础的 24 分栏 , 可以迅速简便地创建布局 . 一 . 使用 Layout 组件 我们先来看官网提供给我们的 Layout 布局 : 我们通过这段代码 , 可以得到 比如 : <!-- 通过 el-row 标签创建一行 --> <el-row> <!--通过 el-col 标签创建列, 通过 span 属性设置占多少列
2024-11-233.1 属性选择器 css2属性选择器 ele[attr]{ } 指定了属性名为attr的ele元素 ele[attr=value]{ } 指定了属性名为attr且属性值为value的ele元素 ele[attr~=value]{ } 指定了属性名称attr,并且属性值词列表中包含value的ele元素 注意:要有词列表的时候,属性名=属性值是选择不上的 /*带有class属性的div元素*/ .wrap div[class]{ background:
2024-11-23先看下示例,在输入 ! 号回车后自动生成一段代码片段。 这样我们就可以更便捷的进行代码编写了。 { "Html templates": { "prefix": "html", "body": [ "<!DOCTYPE html>", "<html>", "<head>", " <meta charset=\"UTF-8\">", " <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
2024-11-23layouts/default.vue <nuxt keep-alive :keep-alive-props="{include: includeArr }"/> <script> export default { data() { return { includeArr: [ 'ServicerManageProjects', 'DataReportData', ]
2024-11-23先给大家展示一下效果 Table 属性 Table 事件 事件名说明回调参数select当用户手动勾选数据行的 Checkbox 时触发的事件selection, rowselect-all当用户手动勾选全选 Checkbox 时触发的事件selectionselection-change当选择项发生变化时会触发该事件selectioncell-mouse-enter当单元格 hover 进入时会触发该事件row, column, cell, eventcell-mouse-lea
2024-11-23mockjs实现数据的增删改查 mock/index.js import Mock from "mockjs"; //随机生成数据 let { newsList } = Mock.mock({ "newsList|40-60": [ { id: "@increment()", title: "@ctitle()", content: "@cparagraph(5)", img_url: "@image('100x100','#fff'
2024-11-23问题分析: 这个 Vue 的警告信息是提示你不应该直接修改父组件传递给子组件的 prop 值,因为 prop 值是只读的。 解决方案: 通过在data中return一个变量接收父组件传过来的值,然后使用定义的这个变量。 完整代码: 子组件: export default { props: { // 文件名称 fileName: { type: String, default: "", }, }, data(){ return
2024-11-232D移动translate 2D移动是2D转换中的一种功能,可以改变元素在页面中的位置,类似定位。 语法 { transform: translate(x, y); /*x,y分别表示x轴和y轴移动的距离*/ } /*或者分开写*/ { transform: translateX(n); transform: translateY(n); } 特点 定义2D转换中的移动,沿着X和Y轴移动元素translate最大优点:不会影响其他元素的位置translate中的百分比单位是相对于
2024-11-23学习目标:1. 掌握基于构造函数创建对象,理解实例化过程 2.掌握对象数组字符数字等类型的常见属性和方法,便捷完成功能 深入对象 (一)创建对象三种方式 1.利用对象字面量创建对象 const o = { name:'佩奇' } 2.利用new Object创建对象 const o =new Object({name:'佩奇'}) console.log(o) //{name:'佩奇'} 3.利用构造函数创建对象 (二)构造函数 含义:是一种特殊函数,
2024-11-23