vue.js3: base64编码/解码(vue@3.2.37)_刘宏缔的架构森林-编程思维
一，js代码 <template> <div> <div style="width:800px;display: flex;flex-direction: row;"> <el-input v-model="plainText" :rows="6" type="textarea"
vue.js3: html的十六进制和rgb颜色互相转换(vue@3.2.37)_刘宏缔的架构森林-编程思维
一，js代码: <template> <div> <div style="width:450px;margin: auto;text-align: center;font-size: 20px;color:#777777;padding-top: 10px;padding-bottom: 10px;"> RGB转十六进制 &l
js根据某属性对json数组分类_爱喝酸奶的吃货-编程思维
原数据： var arr = [ {name: '张三', age: 23, work: '计算机'}, {name: '王五', age: 29, work: '计算机'}, {name: '张兴', age: 30, work: '考古'}, {name: '刘豆豆', age:
postmessage使用_蓓蕾心晴-编程思维
参考自文档：https://www.runoob.com/js/met-win-postmessage.html postMessage 方法用于安全地实现跨域通信。 涉及到通信，则会有信息发送方 和 信息接收方。 发送方，调用 postMessage 方法，发送 message ，接收方，在 window 下监听 message 方法，接受传来的数据。 <!DOCTYPE html&g
web components 组件库 all in one_xgqfrms-编程思维
Web Components 组件库 All In One 原生组件、跨平台、高性能、无框架依赖、高度自定义、高可复用性、高扩展性、体积小 Lit https://lit.dev/playground/ @customElement & @property import {html, css, LitElement} from 'lit'; // @Decorator 装饰器
js 通过id、pid遍历集合获得树结构_爱喝酸奶的吃货-编程思维
原数据 let adreeJson = [ {id: 1, name: '陕西省', pid: 0}, {id: 2, name: '山西省', pid: 0}, {id: 3, name: '广东省', pid: 0}, {id: 4, name: '西安市', pid: 1},
vue3 之 插件的使用_这个系列的教程通俗易懂，适合新手_追风人聊java-编程思维
1. 概述 老话说的好：起点低不要紧，只要坚持不断的去努力就能取得成功。 言归正传，今天我们来聊聊 VUE 中 插件的使用。 2. 插件 2.1 插件的声明 const myPlugin = { install(app, options) { // 增加一个变量 app.provide('name', 'lisi
js 将扁平后的数据 恢复成 树结构 _暗恋桃埖源-编程思维
用 JS 将扁平后的数据 恢复成 树结构 已扁平化后的 省市区 为例子： 扁平后的数据 plain-area.json [ { "id": 4744, "name": "中国", "pid": 0 }, { "id": 1, "name": "北京", "pid": 4744 }, { "id": 72, "na
json数组根据某属性去重_爱喝酸奶的吃货-编程思维
数据： let arry = [ {name: "张三", age: 23, work: '计算机'}, {name: "王五", age: 29, work: '计算机'}, {name: "张兴", age: 30, work: '考古'}, {name: "刘豆豆", age:
vue.js3:父组件子组件互相访问数据方法(vue@3.2.37)_刘宏缔的架构森林-编程思维
一，js代码 1,Child.vue <template> <div style="background: #ffff00;"> <div>这是子组件</div> <div>参数default:{{defaultStr}},参数top:{{topStr}}</div> <div>变量:{
js object.freeze all in one_xgqfrms-编程思维
js Object.freeze All In One const obj = {a: 1, b: 2} // {a: 1, b: 2} const fobj = Object.freeze(obj); //{a: 1, b: 2} fobj.a; //1 fobj.a = 2; // 2 ❌ 无法修改属性的值 fobj; // {a: 1, b: 2} fobj.c = 3; // 3
js get the last element of the array all in one_xgqfrms-编程思维
js get the last element of the array All In One Array.prototype.at() ✅ // Array.at() const arr = [1, 2, 3, 4, 5]; let index = 1; console.log(arr.at(index)); // 2 let lastIndex = -1; console.log(ar
js 拖动（验证码）滑块_tiac-编程思维
核心函数：createEvent、initMouseEvent、dispatchEvent 直接上代码： function slide (id, offsetX) { var slider = document.getElementById(id); var rect = slider.getBoundingClientRect(), x0 = rect.x
js ~~ operator all in one_xgqfrms-编程思维
js ~~ operator All In One 取整 正数，向下取整 ✅ // ~~ 2.1 // 2 ~~ 2.9 //2 ~~ 0.5; // 0 负数，向上取整 ✅ ~~ -2.9 // -2 ~~ -2.1 // -2 ~~ -0.5; // 0 Math Math.ceil & Math.floor Math.ceil(-2.9) // -2 Mat
控制input只能录入数字_marydon-编程思维
1.情景展示 如何控制input录入框，只能输入数字？ 2.具体实现 方式一： 将<input>标签中的type属性直接设置为number就可以达到只能输入数字。 <input type="number" name=""> 缺点1：只适用于HTML5，如果HTML4强行使用，在form表单提交的时候，该数字框将无法提交。 缺点2：它只能作用于网页端，在手机
axios 下载文件流_影的记忆-编程思维
axios 下载文件流 背景：在处理文件下载时，服务端存在校验，需要在请求头里添加token 这时直接使用 a 标签就不能满足需求。接下来我们直接通过 axios 请求，在请求头里设置 token axios({ method: "GET", url: `${请求地址}`, headers: { 'Authorization': ${
leetcode 字符串的全排列 All In One-编程思维
leetcode 字符串的全排列 All In One LeetCode 567. 字符串的排列 // 排列组合 字符串的排列 给你两个字符串 s1 和 s2 ，写一个函数来判断 s2 是否包含 s1 的排列。如果是，返回 true ；否则，返回 false 。 https://leetcode.cn/explore/interview/card/bytedance/242/str
vue.js3: 自定义video垂直可拖动的进度条(vue@3.2.36)-编程思维
一，js代码 <template> <div style="background: rgb(0, 0, 0);width:100%;height:100vh;"> <div style="position:relative;"> <video ref="homeVideo" style="positi
js 使用 canvas 实现一个一笔一画写汉字的效果 All In One-编程思维
js 使用 canvas 实现一个一笔一画写汉字的效果 All In One js canvas 实现按照笔画手绘汉字效果 canvas 画字 fillText & setTimeout & requestAnimationFrame solution ✅ <!DOCTYPE html> <html lang="zh-Hans"> <hea
手写js中的bind-编程思维
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="view