一般出现这种问题是因为vue在利用=赋值时,是一种浅拷贝的方式,它是将等号右边的数据的引用给了等号左边的变量,这也导致了改变等号左边的数据时右边数据也发送变化,从而影响页面数据。 最简单有效的方式就是进行深拷贝,它会在堆…
标签:vue.js
vue 项目如何读取本地json文件数据
在项目根目录有一个static文件夹目录,将所需要的json文件放在该static目录下,使用axios发起get请求获取对应的json文件数据 import axios from 'axios' // 安装axios后…
vue3 teleport(传送门)视屏小窗口应用
需求分析 1.初始化一个视频播放 2.打视频播放区域有如果在视口外 小窗口出现 3.大视频和小视频在切换的时候保持视频状态不变 思路分析: 1.video 西瓜视频播放器 成熟的视频插件 2.监控大视频播放区域是否在视口…
定时器(setInterval)的开启与关闭
我设置的定时器是点击展示子组件的时候开启,等待30s后没有点击页面就关闭子组件,每次点击页面30s内没有点击也会关闭,当我点击退出子组件页面的时候也会关闭定时器 // 父组件展示子组件时开启定时器 this.$refs.…
使用vite构建一个自己的vue3.0的UI组件库,并发布到npm
自定义UI组件库 为何重复造轮子(制造垃圾)的理由 万恶之源 使用vite 使用npm工具 运行以下命令。 编写DIY组件Button 自己写第一个组件库之Button 使用rollup打包库 安装 使用rollup p…
Vue项目菜单导航封装(一级菜单在上面,二级三级菜单在左侧)
效果图: 第一步,封装上方水平一级菜单 <template> <div class="wrapper"> <!-- 页面头部部分 --> <div class="h…
vue项目页面嵌入代码块vue-prism-editor的实现(可在页面编辑代码,有格式化)
1.安装vue-prism-editor npm install vue-prism-editor npm install prismjs // 样式 2.在需要使用vue-prism-editor的组件中引入 impo…
ant design vue table合并数据项,自定义单元格内容
vue 2.x ant vue 问题描述,最近接到新需求,要合并数据项,如下图所示, 其实,单说合并很好理解,跨行设置呗,HTML中的colSpan、rowSpan设置,行,列向合并即可,但是ant中有点绕。上…
vue 中如何将 html 字符串转化为 html
问题还原: 解决方案:用 v-html。 <div class="proj_content">工作描述:<div v-html="item.proj_content"></di…
vue+element 表格 删除 批量删除
效果图 以作物表为例 这里有【批量删除】和【删除】 表单里的批量删除 <el-form-item> <el-button @click="getDataList()">查询</e…
前端三大主流框架的区别(三)
前面两篇已经做了细致的分析,这一篇就总结总结三大主流框架吧 1.angular 1.1. 简介: angular是最早出现的框架, angularjs是通过directive(指令)去封装组件,react和vue是通过c…
vue通过url下载文件,直接预览问题
// url是文件地址 fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址 const a = document.c…