amilytom

amilytom 查看完整档案

武汉编辑  |  填写毕业院校  |  填写所在公司/组织 www.jsxuan.com 编辑
编辑

雁过留声,人去留名

个人动态

amilytom 回答了问题 · 4月5日

解决let {ids,team} = data ,这语法到底对不对?

这是es6的赋值赋值。特别当data是复杂的二维数据类型,使用解构赋值更方便。
下面是解构赋值的用法:
比如:var arr = [1,2,3,4]
使用解构赋值 var arr2 = ...arr
那么arr2 就是 1,2,3,4 。
一般这样做 let arr2 = [...arr, 5]
那么 arr2 = [1,2,3,4,5]
解构赋值用于数组或者对象之间的转换。
后台返回的数据一般为JSON。使用解构赋值,更方便。
例如:data = {
ids: ['20011','20012','20013','20014'],
team: ['football','basekball','pinpang','swiming']
}
这样就可以使用解构赋值
let {ids,team} = data
这样赋值之后,
ids = ['20011','20012','20013','20014']
team = ['football','basekball','pinpang','swiming']
相当于将二维码数组对象转换成普通的一维数组,遍历很方便。

关注 2 回答 3

amilytom 回答了问题 · 4月2日

解决VUE中,动态添加的文本框如何实现数据实时双向绑定?

vue能够侦测到数组响应式更新的只有七种方法:
(1)push
(2)pop
(3)shift
(4)unshift
(5)splice
(6)sort
(7)reverse
而对于object,能够侦测到object响应式更新则只有两种方法:
(1) vue.$set 设置属性值
(2) vue.$delete 删除属性

楼主的错误在于使用item.price = 0;对对象进行了一个赋值,而这个赋值vue是侦测不到它的变化的,即使用赋值操作不是响应式更新。

所以正确的代码应该是:

selectChange(item){
  this.$set(item,'price',0);
  this.goodsPrice.push(item);
}

关注 5 回答 4

amilytom 回答了问题 · 4月1日

js树结构数据递归获取name属性

function getName(obj){
  let arr = []
  if(obj.child.length > 0) {
    arr.push(obj.name)  
    obj.child.forEach(item => {
      let childArr = getName(item)          
      arr.push(...childArr)
    })
  } else {
     arr.push(obj.name)
  }
  return arr
}

关注 6 回答 6

amilytom 赞了文章 · 3月30日

猛增 110K Star!年增长数最多的 10 大顶级前端学习资源项目!

大家好,我是你们的 猫哥,那个不喜欢吃鱼、又不喜欢喵 的超级猫 ~

关于猫哥,大家可以看看我的年终总结 前端工程师的 2020 年终总结 - 乾坤未定,你我皆黑马

今天给大家推荐 2020 年增长数最多的 10 大顶级前端学习资源项目!

看完这 10 大顶级项目,你会发现原来 GitHub 上也有这么多的 JavaScript 学习资源!

1. javascript-algorithms

  • 2020 年增长 31.9K

该仓库包含了多种基于 JavaScript 的算法与数据结构。

每种算法和数据结构都有自己的 README,包含相关说明和链接,以便进一步阅读 (还有 YouTube 视频) 。

数据结构包含了 链表、双向链表、队列、栈、哈希表(散列)、堆、优先队列、字典树、树、优先队列、二叉查找树、AVL 树、红黑树、线段树、树状数组、图、并查集、布隆过滤器

算法包含了 算法主题 和 算法范式。

其中算法主题又包含了:数学、集合、字符串、搜索、排序、链表、树、图、加密、机器学习。

算法范式:算法范式是一种通用方法,基于一类算法的设计。这是比算法更高的抽象,就像算法是比计算机程序更高的抽象。

算法范式包含了:BF 算法、贪心法、分治法、动态编程、回溯法、Branch & Bound 等等。

这项目还出了对应的教学视频,总共 81 个视频讲解,每个视频大概 5 - 10分钟左右,还能学习英语哦 😉

youtube 的教学视频:https://www.youtube.com/playl...

猫哥之前学习算法的时候,也在这个项目中收益良多呢!

而且这个项目还一直有维护和更新内容哦!真的非常不错的一个项目!

https://github.com/trekhleb/j...

更多算法相关的项目推荐可以看看这篇文章:7 个 GitHub 上超火的前端学习的数据结构与算法项目

2. nodebestpractices

  • 2020 年增长 20.2K

Node.js 最佳实践。

这个项目是对 Node.js 最佳实践中排名最高的内容的总结和分享。

这里是最大的汇集,且每周都在增长 - 当前,超过 50 个最佳实现,样式指南,架构建议已经呈现。

目录

  • 项目结构实践 (5)
  • 异常处理实践 (11)
  • 编码规范实践 (12)
  • 测试和总体质量实践 (8)
  • 进入生产实践 (16)
  • 新: 安全实践(23)
  • Performance Practices (coming soon)

比如 错误处理最佳实践 中 使用 Async-Await 和 promises 用于异步错误处理

TL;DR: 使用回调的方式处理异步错误可能是导致灾难的最快的方式(a.k.a the pyramid of doom)。对您的代码来说,最好的礼物就是使用规范的 promise 库或 async-await 来替代,这会使其像 try-catch 一样更加简洁,具有熟悉的代码结构。

否则: Node.js 回调特性, function(err, response), 是导致不可维护代码的一个必然的方式。究其原因,是由于混合了随意的错误处理代码,臃肿的内嵌,蹩脚的代码模式。

https://github.com/goldbergyo...

3. You-Dont-Know-JS

  • 2020 年增长 18K

该项目为 YDNJS(You Don’t Know JS) 图书系列,包含一系列深入探讨 JavaScript 语言核心机制的书籍。

内容大纲

  • 入门与进阶
  • 作用域与闭包
  • this 与对象原型
  • 类型与文法
  • 异步与性能
  • ES6 与未来
https://github.com/getify/You...

4. clean-code-javascript

  • 2020 年增长 15.1K

优秀的 JS 代码规范。

比如:对相同类型的变量使用相同的关键字

Bad:

getUserInfo(); 
getClientData(); 
getCustomerRecord();

Good:

getUser();

再比如:使用可搜索的命名

在开发过程中,我们阅读代码的时间会远远超过编写代码的时间,因此保证代码的可读性与可搜索会非常重要。

切记,没事不要坑自己。

Bad:

//525600到底啥意思?
for (var i = 0; i < 525600; i++) {
  runCronJob();
}

Good:

// 声明为全局变量
var MINUTES_IN_A_YEAR = 525600;
for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {
  runCronJob();
}
https://github.com/ryanmcdermott/clean-code-javascript

5. 30-seconds-of-code

  • 2020 年增长 13.3K

该项目讲的是满足你所有开发需求的简短代码段,里面都是些经常会用到而且是非常经典的代码,非常值得学习!

比如 JavaScript 模块就分为了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便学习的。

比如:你必须知道的 4 种 JavaScript 数组方法

Array.prototype.map()

const arr = [1, 2, 3];
const double = x => x * 2;
arr.map(double); // [2, 4, 6]

Array.prototype.filter()

const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.filter(isOdd); // [1, 3]

Array.prototype.reduce()

const arr = [1, 2, 3];

const sum = (x, y) => x + y;
arr.reduce(sum, 0); // 6

const increment = (x, y) => [...x, x[x.length - 1] + y];
arr.reduce(increment, [0]); // [0, 1, 3, 6]

Array.prototype.find()

const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.find(isOdd); // 1

又比如:如何在 JavaScript 中实现睡眠功能?

同步版本

const sleepSync = (ms) => {
  const end = new Date().getTime() + ms;
  while (new Date().getTime() < end) { /* do nothing */ }
}

const printNums = () => {
  console.log(1);
  sleepSync(500);
  console.log(2);
  console.log(3);
};

printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)

异步版本

const sleep = (ms) =>
  new Promise(resolve => setTimeout(resolve, ms));

const printNums = async() => {
  console.log(1);
  await sleep(500);
  console.log(2);
  console.log(3);
};

printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)

其实上面讲到的事例里面还提供 api 和方法的讲解的,方便读者能看懂的,这里就不写出来了。

还想学更多的 经典 js 代码片段,请看下面的仓库

https://github.com/30-seconds...

6. javascript

  • 2020 年增长 11.8K

这个项目是 JavaScript 编程风格指南。

包含了:类型、对象、数组、字符串、函数、属性、变量、提升、比较运算符 & 等号、块、注释、空白、逗号、分号、类型转化、命名规则、存取器、构造函数、事件、模块、jQuery、ECMAScript 5 兼容性、测试、性能、资源、JavaScript 风格指南说明

https://github.com/airbnb/javascript

7. tech-interview-handbook

  • 2020 年增长 10.6K

技术人员求职面试,单刷leetcode上的大厂题库可能还不够。

简历怎么写才能吸引HR的眼光,可能会被技术老大问到哪些常见问题,拿到Offer之后怎样才能让自己的优势最大化然后优中选优?

面对这些赤果果的问题,目前就职于Facebook的新加坡小哥Yangshun Tay就整理了一份干货。

面试全流程需要注意的事项都在里面了,包含从简历准备、面经和谈判全过程,教你如何避雷不踩坑。

精心策划的内容可帮助您获得下一次技术面试的机会,重点是算法。

除了常见的算法问题外,其他出色的功能还包括:

  • 如何准备编码面试
  • 面试备忘单-直截了当的注意事项
  • 按主题分类的算法技巧和最佳实践问题
  • “前端面试问题”答案
  • 顶尖科技公司的面试形式
  • 顶尖科技公司提出的行为问题
  • 在面试结束时问您的面试官的好问题
  • 有用的简历提示,以使您的简历受到关注以及注意事项
https://github.com/yangshun/t...

8. freeCodeCamp

  • 2020 年增长 10.4K

FreeCodeCamp 是一个自由开源的学习编程的社区,致力于帮助人们利用零散时间学习编程。

它的使命是 Learn to code and help nonprofits(学习编程,去帮助那些非盈利组织)。

FCC 涵盖 HTML5、CSS、React、JavaScript、Database 等课程,游戏化程度非常高,学员可以通过线上聊天室和线下社区活动(Coffee and Code)相互帮助。

目前覆盖全球 160+ 个国家、1000+ 个城市,40W+ 开发者在平台学习。

https://github.com/freeCodeCa...

9. Front-End-Checklist

  • 2020 年增长 9.2K

该项目是详尽的关于前端开发的清单,它列出了将 HTML 页面投入生产之前需要进行测试的所有元素。

它基于众多前端开发人员的多年经验,其中一部分整合自其他的开源清单。

内容包含:

  • Head
  • HTML
  • Webfonts
  • CSS
  • Images
  • JavaScript
  • Security
  • Performance
  • Accessibility
  • SEO
https://github.com/thedaviddi...

10. vanillawebprojects

  • 2020 年增长 8.2K

新手上路最开始用的就是基础的 HTML+CSS+JS 三件套,而在框架和库越来越多的现在,更多的时候使用它们来提高效率是常见的选择。

这个项目则是反过来,是使用老三件套实现的一些小项目合集,不管是为了更好理解框架,还是为了验证一下自己的知识水平,重新操刀老三件套都不失为一个好选择,要知道不管是什么框架和库,基础都是由这三板斧搭建起来的。

https://github.com/bradtraver...

最后

不知不觉,原创文章已经写到第 33 期了呢,几乎每一篇都是猫哥精心挑选的优质开源项目,推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

原创不易,一篇优质的文章都是要肝几个晚上才能肝出来的,花费很多时间、精力去筛选和写推荐理由,大佬们看完文章后顺手点个赞或者转发吧,给猫哥一点鼓励吧。

往期精文请看下方宝藏仓库,请慎入!

https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源项目,可以看看这篇文章:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

公众号:前端GitHub,专注于挖掘优秀的前端开源项目,抹平你的前端信息不对称,致力于打造最优质的前端开源项目资源库。

微信搜 “前端GitHub”,回复 “电子书” 即可以获得上面 160 本前端精华书籍哦,猫哥 WX:CB834301747

往期精文

原创不易,给点鼓励吧

查看原文

赞 50 收藏 38 评论 0

amilytom 回答了问题 · 3月26日

vue 子组件接收父组件的props,使用emit给父组件之后如何在传递给子组件

需要在子组件中使用watch监控父组件传递过来的数据的实时变化。根据传递过来的数据类型不同,watch方法略有差异。
1、传递过来的数据是基础类型

props: {
    argumentName : String   //基础类型,如number,string,bool
},
watch: {
    argumentName(newValue, oldValue) {
        console.log(newValue)
    }
}

2、传递过来的数据是数组类型

props: {
    argumentName : Array
},
watch: {
    argumentName:{
        handler(newValue, oldValue) {
      for (let i = 0; i < newValue.length; i++) {
        if (oldValue[i] != newValue[i]) {
          console.log(newValue)
        }
      }
    },
    deep: true
    }
}

3、传递过来的数据是object对象类型

props: {
    argumentName : Object
},
watch: {
    argumentName:{
        handler(newValue, oldValue) {
       console.log(newValue)
      },
    deep: true
    }
}

关注 6 回答 5

amilytom 关注了用户 · 3月23日

疯狂的技术宅 @evilboy

资深技术宅,爱好广泛,兴趣多变。博览群书,喜欢扯淡。十八种语言样样稀松。想要了解更多,请关注微信公众号:充实的脑洞

关注 6170

amilytom 关注了用户 · 3月22日

民工哥 @jishuroad

10多年IT职场老司机的经验分享,坚持自学一路从技术小白成长为互联网企业信息技术部门的负责人。

我的新书:《Linux系统运维指南》

微信公众号:民工哥技术之路

民工哥:知乎专栏

欢迎关注,我们一同交流,相互学习,共同成长!!

关注 3586

amilytom 关注了用户 · 3月13日

前端小智 @minnanitkong

我不是什么大牛,我其实想做的就是一个传播者。内容可能过于基础,但对于刚入门的人来说或许是一个窗口,一个解惑之窗。我要先坚持分享20年,大家来一起见证吧。

关注 10221

amilytom 回答了问题 · 3月12日

解决使用 antd-admin vue版本发现退出无刷新重新登陆后会保持上一个用户的菜单。

这样的问题有两种解决办法:
方案一:location.reload刷新页面
在登录成功之后,使用location.reload()刷新一下页面,应该问题会解决。
但这种方法会影响体验感。算是有瑕疵的解决方案。

另外就是可以在退出登录或者token失效返回到login页面的时候,使用location.reload()刷新一下login页面,从而清除router缓存,重新再加载路由。这种方案应该比在登录之后跳转页面刷新体验要好一些。(针对cookie或者localstorage这种token存储方式的项目,不退出,直接关闭页面应该会有些许瑕疵)

    if (this.$store.getters.addRouters.length > 0) { // 判断是否已经刷新
          location.reload()
    }

方案二: 重置matcher
(1)在router中定义重置路由的方法

const createRouter = () => new VueRouter({
        mode: 'hash',
        routes: constantRoutes,
        scrollBehavior: () => ({ y: 0 })
});
const router = createRouter();
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

然后在退出登录logout中使用 resetRouter()重置路由。
(2)在addRoutes加载路由之前重置matcher


resetRouter()   //重置路由
router.addRoutes(store.getters.addRouters)  //加载路由

关注 2 回答 3

amilytom 赞了回答 · 3月11日

解决vue项目安装插件时,报了@babel/core以及@babel/preset-es2015的错误,请教该怎么解决?

npm 安装的都是最新的包,用yarn装试试,这个项目可能比较老,新包的兼容性不好。

先把node_module删了

npm i yarn -g

...

yarn install 或者 npx yarn install

关注 2 回答 1

amilytom 提出了问题 · 3月11日

解决vue项目安装插件时,报了@babel/core以及@babel/preset-es2015的错误,请教该怎么解决?

image
image

试过将@babel/core和@babel/preset-es2015删除,然后再重新下载,结果删除的时候也报错,报错同上面的情形差不多。

这个项目时从github上下载,springboot+vue
https://github.com/YXJ2018/Sp...
springboot已经成功实施,目前vue部署之后开始npm install安装插件,出现的问题。
请教万能的大佬,遇到这样的问题该怎么解决?

关注 2 回答 1

amilytom 赞了回答 · 3月9日

vue打包npm run build打包图片发生error出错

你这个应该是图片压缩的时候出错的
关闭360腾讯电脑管家等软件
重新执行一下
要用cnpm 因为npm下载不下了
npm remove image-webpack-loader
cnpm install --save-dev image-webpack-loader

然后在 npm run build

关注 4 回答 4

amilytom 回答了问题 · 3月2日

关于整合eslint和prettier的副作用

看着像vscode编辑器。
vscode配置eslint+prettier的方法网上有很多。我也试过了很多。总结了出一部分经验,我目前在用。

首先分别安装eslint、prettier code formatter以及vetur这三个插件,其他的不需要。

安装好插件之后,打开设置(快捷键 ctrl+,),然后点击右上角的“打开设置json”,打开setting.json。

{
  "editor.fontSize": 16,
  "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,  // 缩略图关闭
  "editor.wordWrap": "on", // 換行
  "editor.tabCompletion": "on",
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "window.zoomLevel": 0,
  "workbench.startupEditor": "welcomePage",
  // "editor.renderWhitespace": "boundary", // 空白用圆点补足
  "editor.cursorBlinking": "smooth",
  "editor.minimap.renderCharacters": false,
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxml": "html",
    "*.wxss": "css",
    "*.wxs": "javascript"
    // "*.vue": "html"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  //在使用搜索功能时,将这些文件夹/文件排除在外
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/target": true,
    "**/logs": true
  },
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  /************** ESlint *****************/
  "eslint.format.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  },
  "eslint.nodePath": "",
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "html",
    "vue"
  ],
  /************** Vetur *****************/
  //  #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  "prettier.printWidth": 120, // 超过最大值换行
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用单引号替代双引号
  "prettier.singleQuote": true,
  "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
  "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号
  "prettier.bracketSpacing": true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
  "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
  "prettier.requirePragma": false, // 不需要写文件开头的 @prettier
  "prettier.useEditorConfig": false,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // #vue组件中html代码格式化样式
      "wrap_attributes": "force-aligned", //也可以设置为“auto”,效果会不一样
      "wrap_line_length": 100,
      "end_with_newline": false,
      "semi": true,
      "singleQuote": true
    },
    "prettier": {
      "printWidth": 100,
      "singleQuote": true, // 使用单引号
      "semi": false, // 末尾使用分号
      "arrowParens": "avoid",
      "bracketSpacing": true,
      "proseWrap": "preserve", // 代码超出是否要换行 preserve保留
      "trailingComma": "none"
    }
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // html格式器
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "git.confirmSync": false,
}

vue格式是通过vetur来格式化的,javascript是通过prettier来格式化的。vue需要满足eslint规范,需要让渡给prettier,通过prettier来规范vue格式。但是eslint有一些特殊要求,比如设置prettier来实现。
这样设置了之后,ctrl+s一键保存然后格式化vue、js和html、css等文件。

关注 2 回答 1

amilytom 回答了问题 · 2月25日

解决vue框架下的web网页占用了其他页面的样式,怎么办?

<style scoped> @import "../assets/login.css"; </style>

这样写是引入外部样式的一种方式。但是这种方式是在页面加载完成之后才加载的。

VUE中scoped的编译原理是通过vue-loader这个插件,在编译打包的时候将带有scoped属性的css打上一个tag,同时将template内的所有html都打上一个相同的tag,最后通过css的属性选择器定位,造就了所谓的局部css。

css-loader对@import的文件会当做外部资源,是把import的css文件单独提取出来,并没有把其中的样式放在<style scoped>中解析,而是最后把<style>中计算结果和import的css文件混合后,交由style-loader最后解析为style标签加载在页面里。

换句话说,也就是@import引入的样式其实引入全局的样式,不管有没有scoped。

如果要让样式局部起作用,需要使用style引入

<style data-original="../assets/login.css" scoped></style>

关注 3 回答 3

amilytom 赞了回答 · 2月20日

解决js 数据转换

image.png

let a = {
  '小红': [{time: 1, age: 2, height: 22}, {time: 2, age: 12, height: 11}],
  '小明': [{time: 1, age: 5, height: 21}, {time: 2, age: 11, height: 9}]
}

;[...Object.keys(a).reduce((m, k) => {
    a[k].map(({time, ...rest}) => {
        const t = m.get(time) || { time }
        Object.keys(rest).map(_k => { t[`${_k}${k}`] = rest[_k] })
        m.set(time, t);
    })
    return m;
}, new Map()).values()];

关注 2 回答 1

amilytom 回答了问题 · 2月19日

nextjs+antd时使用Row组件报Prop `style` did not match警告。

看了一个国外网站的回答,说是把.babelrc.json重命名为babel.config.json就可以解决这个问题。

关注 1 回答 1

amilytom 回答了问题 · 2月19日

解决vue修改数据问题

建议看下深拷贝和浅拷贝。
无论是数组或者对象,深拷贝都有一个简单的方法

JSON.parse(JSON.stringify(array))

关注 4 回答 4

amilytom 回答了问题 · 2月19日

解决小程序input输入,另一个数字实时相减,请问怎么处理呢?

看了楼主,发现有些小问题。
第一个,计算的部分

if (value >= priceVar) {
      show = false;
      num = price;
    } else {
      show = true;
      num = priceVar - value;
      if (num >= price) {
        num = price
      }
      console.log(num)
    }

应该先判断input是否为空,即value是否为空或者为undefined的情况,然后才能进行下面的判断。

if(value && value != '') {
    if (value >= priceVar) {
      show = false;
      num = price;
    } else {
      show = true;
      num = price - value;
      if (num >= price) {
        num = price
      }
      console.log(num)
    }
} else {
    value = 0
    price = 100
    priceVar = 100
}

第二个: 每次输入的时候是使用100减,那么使用原价格(price)来做计算,而不是priceVar

num = price - value

priceVar每计算一次就变化一次。原价格price类似常量。没做任何计算,不会变。

关注 2 回答 2

amilytom 回答了问题 · 2月13日

python3中mysql 插入多个字段如何处理

可以使用sequelize

关注 5 回答 5

amilytom 回答了问题 · 2月10日

解决css实现元素中空透明色,如图

利用css伪类after可以实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Examples</title>
    <style>
      .hole {
        width: 100px;
        height: 100px;
        position: relative;
        margin-top: 200px;
        margin-left: 200px;
        border-radius: 0;
        background-color: transparent;
        border: 100px solid #00a1e8;
        z-index: 1;
        position: absolute;
      }
      .hole:after {
        position: absolute;
        height: 100px;
        width: 100px;
        left: -50px;
        top: -50px;
        content: '';
        border-radius: 50%;
        border: 50px solid #00a1e8;
        z-index: 5;
      }
    </style>
  </head>
  <body style="background-color: #333">
    <!-- body 设置背景色是为了能看出镂空效果 -->
    <div class="hole"></div>
  </body>
</html>

image.png

关注 3 回答 3