-
Vue文本换行问题
问题背景：后端返回的字符串带有\n换行符，但Vue将其插值渲染成div内部文本后，文本并不换行，换行符显示为一个空格。目标：让文本在换行符处换行。解决方法：思路：实现文本换行有两种方法，一是HTML方法，即<br>标签；二是CSS方法，即white-space属性。方法1. 使用v-html首先，将字符串里的\n替换为<br>，然后用v-html指令渲染字符串为innerHTML。// JS部分this.text = res.data.replace(/\n/g, ...…
-
vue 访问本地过滤器
一般使用过滤器大多是直接在 template 里面调用过滤器，但是，有时候需要再js里面处理过滤数据。之前不知道怎么处理，网上查找的记录一下。使用this.$options.filters[]方式获取本地过滤器<div id="body"> <button @click='getLocal()'>调用本地过滤器</button></div><script >new Vue({ el:'#body', filters:{ ...…
-
记一次工作中的项目效率优化
事情的开始是这样子的…产品: 我们要做一个公众号推广活动，跟渠道方合作的，巴拉巴拉…我: 好的…项目上线后没几天，产品又找上我说，我们要新增一个渠道合作方我一听，心中大为警惕，以我多年的经验来判断，问了一句，除了这个后面还会不会有别的合作方产品: 不一定，可能还会有，￥%……so… 还是要做好那种可以配置的，稍微自动的。访问一个地址，怎么去区分不同渠道商呢？只有一个办法就是url里面添加 channel 字段区分，去匹配相应的渠道内容。然后，现在要做的是就把之前，所有的可能会变动的内容，都...…
-
vue 的 watch 事件怎么在初始化的时候执行
之前的做法一直是在 created 钩子之后手动调用一次created() { this.fetchText();},watch: { text: 'fetchText',}后来在翻阅文档的时候发现一个属性 immediate 这样在初始化的时候也会触发 该回调将会在侦听开始之后被立即调用watch: { text: { handler: ‘fetchText’, immediate: true } }这样就代码看着就舒爽很多啦…
-
sass 结合 keyframe 实现 css3的逐帧动画
现有如下雪碧图，实现逐帧动画效果预览:所以需要结合css3 animation的steps() 属性，我理解的steps的第一个参数的代表的是在一个动画间隔里分几步实现。比如上图中的动画分为9帧，每一帧宽度为291px,如果我的 @keyframe 写法如下@keyframes stepMonkey { 0% { background-position: 0; } 100% { background-position: -8*291px; }}那么此动画的animati...…
-
唤起软键盘的时候点击完成底部会出现空白
唤起软键盘的时候点击完成底部会出现空白在开发移动端html里，需要唤起ios的软键盘。但是在个别苹果测试机里，发现当软键盘退出后，会多出一块区，导致窗口变小大部分人提供的解决方案是//添加onblur监听事件window.scrollTo(0,0)的确能解决，可为什么一定要回滚到顶部呢？如果当时的input在第1屏外，这样的用户体验很差。既然默认给它个滚动就行，那我们就来个相对滚动就OK了//相对当前滚动位置 向下滚动1像素。 window.scrollBy(0,1)当然考虑到当前滚动条位...…
-
mint-ui picker 三级联动实现
使用这个插件遇到几个问题总结一下。问题一 mint-ui picker defaultIndex修改设置默认值设置不了按照官网的例子 http://mint-ui.github.io/docs/#/zh-cn2/picker， 然后使用 defaultIndex 发现怎么修改默认值都不会变。解决方案：在data() 实例对象里面声明的时候，就需要添加 defaultIndex属性值。o(╥﹏╥)o问题二 设置默认值问题，初次进入设置 北京市-市辖区-东城区 设置无效。除了北京市之外的其它...…
-
使用 CSS 伪类为 select 元素添加 placeholder
参考stackoverflow: https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box<style> select:required:invalid { color: gray; } option[value=""][disabled] { display: none; } option { color: black; }</...…
-
jest 报错 SyntaxError: Unexpected string
最近研究单元测试，使用 vue-cli3 新建的项目，然后一直报错，其中错误如下● Test suite failed to run /Users/lyc/Desktop/study/vue/vue-jest1/tests/unit/about.spec.js:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-...…
-
JavaScript 算法练习（六）- 尾递归
Es6看了一遍又一遍，还是能get到一些东西，正好也对算法优化有所帮助。以后写递归的时候要尽可能的转换成尾递归。尾递归函数调用自身，称为递归。如果尾调用自身，就称为尾递归。递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。function factorial(n) { if (n === 1) return 1; return n * factor...…
-
JavaScript 算法练习（五）- 合并两个有序数组
给定两个有序整数数组 nums1 和 nums2，将 nums2 合并到 nums1 中，使得 num1 成为一个有序数组。说明: 初始化 nums1 和 nums2 的元素数量分别为 m 和 n。 你可以假设 nums1 有足够的空间（空间大小大于或等于 m + n）来保存 nums2 中的元素。 示例:输入: nums1 = [1,2,3,0,0,0], m = 3nums2 = [2,5,6], n = 3输出: [1,2,2,3,5,6]方法一...…
-
JavaScript 算法练习（四）- 搜索二维矩阵 II
编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target。该矩阵具有以下特性： 每行的元素从左到右升序排列。 每列的元素从上到下升序排列。示例 1:现有矩阵 matrix 如下[ [1, 4, 7, 11, 15], [2, 5, 8, 12, 19], [3, 6, 9, 16, 22], [10, 13, 14, 17, 24], [18, 21, 23, 26, 30]]给定 target = 5，返回...…
-
JavaScript 算法练习（三）- 求众数
给定一个大小为 n 的数组，找到其中的众数。众数是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素。你可以假设数组是非空的，并且给定的数组总是存在众数。示例 1:输入: [3,2,3]输出: 3示例 2:输入: [2,2,1,1,1,2,2]输出: 2方法一（哈希表）：需要O(n)的时间和空间var majorityElement = function(nums) { let l = nums.length let map = new Map() let max = 0 ...…
-
JavaScript 算法练习（二） - 只出现一次的数字
给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。说明：你的算法应该具有线性时间复杂度O(n)。 你可以不使用额外空间来实现吗？示例 1:输入: [2,2,1]输出: 1示例 2:输入: [4,1,2,1,2]输出: 4方法一：利用Map() Hash 结构Map真的是解决算法问题的神器…方法如下var singleNumber = function(nums) { let l = nums.length let map = new Ma...…
-
JavaScript 算法练习（一） - 两数之和
摘要开始刷算法题，巩固基础~题目描述给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样下标的元素。示例给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]方法一：var twoSum = function(nums, target) { ...…
