- 博客(17)
- 收藏
- 关注
RSS订阅原创 使用element-ui中的轮播图来简易实现标签页
<template> <div id="app"> <div class="top"> <ul> <li v-for="item in list" :key="item.id" :class="[flowAct === item.name ? 'active' : '']" @click="change(item.name)">{{item.name}}</li> </ul>
2022-01-10 17:13:54
749
原创 vue中的key
Vue中的事件修饰符如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入如何插入一段漂亮的代码片去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.// An highlighted blockvar foo = 'bar';生成一个适合你的列表项目项目项目
2022-01-10 14:43:11
897
原创 vue3中的watch
vue3中的watch比起vue2中的watch有了些许的变化，我们使用composition api来写基本数据类型的监视：<template> 当前求和为：{{ sum }} <button @click="sum++">点我++</button></template><script>import { ref, watch } from "vue";export default { name: "App", set
2021-12-07 16:13:45
10790
原创 Vue2和Vue3的数据响应式原理区分
vue2中的数据响应式的实现主要是采用了Object.defineProperty()的方法，通过该方法的get()和set()来实现数据的响应式变化，简单写一下，vue实现的要复杂的多let num = 20let person = { name:'tom', sex:'男'}Object.defineProperty(person,'age',{ get(){ console.log(有人读取了age); return num }, set(val){
2021-12-06 10:22:09
487
原创 Vue中的data为什么要写成函数形式
vue中的data有两种形式的写法，对象形式和函数形式，如果只在一个页面中引入vue.js可以把它写成对象形式<div id="app"> </div><script>var app = new Vue({ el: "#app", data: { },});</script>但是如果使用了组件进行开发就必须把data写成函数形式，在脚手架中data也全部是写成函数形式的，如果写成对象形式会直接报错<script>
2021-12-03 10:29:17
1311
原创 vue中使用搜索框节省流量的方法
在写列表的时候一定要有搜索功能，搜索可以通过监听来实现<template> <div> <el-input v-model="params.searchWard" size="small" placeholder="请输入搜索名称" style="width: 200px; margin-bottom: 10px" > </div></template><scri
2021-11-22 10:58:11
460
原创 ES6中Set的一些用法
ES6中的set最常用的方法就是给数组去重let arr = [1, 2, 3, 1, 3, 5, 6]let result = [...new Set(arr)]console.log(result);[ 1, 2, 3, 5, 6 ]除此之外还可以给数组取交集，两个数组中相同的部分let arr = [1, 2, 3, 1, 3, 5, 6]let arr2 = [1, 2, 3, 7, 8, 9, 8, 7]let result = [...new Set(arr)].filter(
2021-11-15 10:39:17
651
原创 JavaScript中typeof与instanceof
typeof可以判断出一个变量的类型数字var a = 1;console.log(typeof a);//number字符串var a = 'hello';console.log(typeof a);//string布尔var a = true;console.log(typeof a);//booleannullvar a = null;console.log(typeof a);//objectundefinedvar a = undefined;console.
2020-11-21 14:28:58
205
1
原创 Vue中简单的路由嵌套
此代码中one为菜单一，two为菜单二，a为菜单1，b为菜单2，c为菜单3，d为菜单4；要注意template中的内容必须写在一个div中，且 routes中的children里的path不能加斜杠<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
2020-11-20 16:26:07
92
原创 Vue使用v-bind实现点击按钮切换div的颜色
刚刚接触Vue，先学着做一些简单的效果点击按钮切换div的颜色<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script> <style> #app div{ width: 200px; height: 200px; } #one{ backgro
2020-11-17 19:59:26
2660
原创 Vue中v-if和v-show的区别
v-if:根据条件判断，控制当前的节点是否显示到页面中如果为true，文本显示 <div id="a"> <span v-if='Show'>this is a text</span> </div> <script> new Vue({ el:'#a', data:{ Show:true
2020-11-17 19:00:27
97
原创 数组常用方法总结
一、数组检测对于一个网页或者一个全局作用域而言，使用instanceof操作符即可判断某个值是否是数组。但是如果网页中包含多个框架，这样就存在两个不同的全局执行环境，从而存在两个不同版本的Array构造函数，这样就会判断不准确。所以使用Array.isArray()方法来进行判断。var arr = [10,20,30];console.log(typeof arr);//objectconsole.log(arr instanceof Array);//true 在同一个全局作用域下可以这么判断
2020-11-14 17:21:38
448
原创 cookie与webStorage的区别
cookie：存储容量最大不能超过4kb；安全性较低，每次请求cookie都会被携带到服务器端，且以明文方式存储，一旦被拦截，信息则会被获取webStorage分为sessionStorage和localStoragesessionStorage
2020-11-12 19:12:11
489
原创 ES6对象扩展
Object.is同值输出true，与===类似；let a = 10;let b = 10;console.log(Object.is(a,b));//true不同之处在于：一是+0不等于-0，二是NaN等于自身，和===不一样。let a = +0;let b = -0;console.log(Object.is(a,b));//falseconsole.log(a===b);//truelet a = NaN;let b = NaN;console.log(Object.is
2020-11-11 11:27:43
79
原创 es6解构简述
es6解构简述ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构一、数组的解构赋值完全解构：左边的变量和右边的值一一匹配的关系let [a,b,c] = ['tom',20,true];console.log(a,b,c);//tom 20 true不完全解构：左边的变量只匹配右边值的一部分let [a,b,c] = ['tom',20,true,11,[]];console.log(a,b,c);//tom 20 true解构不成功: 左边的一部分变量匹配右
2020-11-10 19:27:02
176
原创 JavaScript中var、let、const的区别
var、let、const的区别（1）var全局声明变量，let,const声明的变量只在let,const所在代码块内有效 ；（2） var存在变量提升，即变量可以在声明之前使用，值为undefined ；console.log(a);//undefined var a = 2;等价于var a;console.log(a);a = 2;let和const声明的变量必须在声明后才可以使用，否则报错，查过别人的博客有人写let和const也存在变量提升，但是他们的确表现为变量不提升，一
2020-11-10 16:00:52
93
原创 行内及块级元素在块级元素内实现水平垂直居中
行内及块级元素在块级元素内实现水平垂直居中1、行内元素 <div> <span>This is a text</span> </div> div{ height: 200px; width: 200px; background-color: lightblue; }（1）方法一给div中设置line-height为当前块级元素高度，设置tex
2020-10-22 21:43:17
1297
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人