vue
过年了^_^
这个作者很懒,什么都没留下…
展开
-
elementui表格嵌套下拉显示不同子数据
使用elementui表格组件,实现下拉显示子数据,并且子数据与表格行数据关联首先有一个父表格使用 @expand-change=“expandChange”父表绑定数据是list子表绑定数据是父表当前下拉行数据的detailsList当然list 和 detailsList都是自己定义的名称。<el-table :data="list" border fit highlight-current-row @ex原创 2021-07-01 19:27:32 · 1094 阅读 · 0 评论 -
vue中DOM元素可见区域大小根据屏幕大小调整可见宽、高度
以表格高度为例data() { return { tableHeight:0 }}created() { this.setClient();},methods: { //表格高度适应可见区域大小 setClient() { this.changeClient() window.onresize = () => { this.changeClient() }原创 2021-05-26 12:02:58 · 594 阅读 · 0 评论 -
引入vant组件样式不显示
1.终端安装插件npm i babel-plugin-import -D2.配置.babelrc["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }]原创 2021-05-07 13:58:37 · 1294 阅读 · 0 评论 -
vue路由冗余:NavigationDuplicated: Avoided redundant navigation to current location
vue路由点击报出这个错误:NavigationDuplicated: Avoided redundant navigation to current location在路由文件里:1.2.const ORIGINPUSH = Router.prototype.pushRouter.prototype.push = function push(location) {return ORIGINPUSH.call(this,location).catch(err => err)}原创 2021-05-07 09:58:18 · 483 阅读 · 0 评论 -
vue子传父传递事件
父组件引入子组件,子组件事件testShowName,绑定父组件事件函数testEvent。父组件事件传入一个参数rel并打印。<template> <div> <test @testShowName="testEvent"></test> </div></template><script> import test from '../../components/test.vue' export def原创 2021-02-08 17:43:45 · 644 阅读 · 0 评论 -
使用 vue-cli 3创建vue项目
首先创建一个文件夹作为工作区。vsCode打开这个文件夹,开启终端,也就是命令行工具。1.输入如下命令,创建叫做Practice的项目,回车。vue create Practice2.回车后会出现这个提示: ?Please pick a preset:选择一个预设如果是第一次创建的话,会和我的不一样。因为我在此之前创建过项目了,所以会保留之前创建项目时的预设置。前四条是之前创建的项目配置。可以选择和之前项目一样的配置。默认Vue 2 配置Defaut ([Vue 2] babel,es原创 2021-02-06 18:14:22 · 187 阅读 · 0 评论 -
vue基本指令使用
1.渲染数据写在data里面,用插值表达式{{ }}展示数据<div id="#app"> {{message}}</div><script> const vm = new Vue({ el:"#app", data:{ message:"《送你一朵小红花》" } })</script>《送你一朵小红花》2.条件渲染 v-if v-else /v-if v-if-else v-else<div id="原创 2021-02-05 16:59:57 · 130 阅读 · 0 评论 -
关于Vue中qs插件
qs插件是干什么的?答:查询字符串解析和将对象序列化的库。data中有数组的时候,是需要序列化才能与后台进行传递的。安装:npm install qs引入:import qs from 'qs’一般应用有两种方式:1.qs.stringify():将对象序列化成url的形式;以&进行拼接2.qs.parse():将url解析成对象形式;qs.stringify():let obj = { method:'query_data', user:'xiaoming', pas原创 2021-02-05 15:12:20 · 306 阅读 · 0 评论 -
关于页面间路由传参
页面跳转时,携带参数传过去,让被跳转的页面能获取到数据。传参页面:跳转时通过query发送数据datasend(){ this.$router.push(path:"/跳转的路由地址",query:{data:发送的数据})}接收页面:接收query里的数据datagetQuery(){ const routerQuery = this.$router.query.data}...原创 2021-02-05 11:57:27 · 96 阅读 · 0 评论 -
引用组件中 DatePicker日期选择器无法显示,日期格式转换
上次项目里遇到的一个坑,算是用笨办法解决了。笨办法也蛮好用的其实。这里我用的是饿了么组件的日期选择器。如图是正常显示的情况。但是api的接口穿的是 “xxxx年xx月xx日” 的中文格式。那这个日期组件自然无法显示了。这时候需要对接口中的日期格式转换一下,让其中的年月日用 “ - ”来代替连接。莫嘲笑,很好用。这个this.ocrDate.date 是接口中的日期。将其中年月日替换下重新赋给这个日期。那么这个接口的日期就是xxxx-xx-xx 也就是 yyyy-mm-dd了。...原创 2021-02-05 11:44:42 · 719 阅读 · 0 评论 -
vue中列表渲染
当数组中都有多个元素,然后想逐一把他们展现出来,首先想到的就是遍历数组。vue中就有一个非常简单实用遍历的方法。 v-fordata中有数组arrayconst vm = new Vue({ el:'#app', data:{ array:["1","2","3","4","5"] } })在页面想展现出来<div id="app"> <ul> <li v-for="(item,index) in array" :key="in原创 2021-02-05 10:56:11 · 55 阅读 · 0 评论 -
Vue使用axios
1.首先得安装吧~npm install --save axios vue-axios2.config–>建一个js文件,名字看你3.http.js 里:import axios from 'axios' //引入axiosconst http = axios.create({ baseURL: '', //接口根路径 timeout: 90000, //请求超时时间})//post请求方式export function post(ur原创 2021-02-04 16:24:43 · 113 阅读 · 0 评论 -
调api接扣更改数据键名
今天要做一个配置页面,是这样的看见那个border-radius了?喔天哪~数据中当键名的时候可不能直接用-连接,得用_下划线。但是,就想把_改成-,不仅如此我还要这么传给api!!!你奈我何????就是这样~没老铁~毛病!...原创 2021-02-04 14:42:38 · 71 阅读 · 0 评论 -
调用方法创建临时变量,方法执行完毕临时变量自动销毁
这是今天vue项目里马虎掉的一个小bug,简单说下吧~代码如下(更改过的)起初,为了让表单中某个输入框输入的值以数组的形式存起来,因为原先是字符串格式,所以写了个转换成数组的方法change().想的是,把用户输入的值转换后存到自己定义的一个数组,(这个数组在data里定义的,如图中第一个红框框)。然后把这个数组正儿八经的赋给表单数据中的那个输入框(应该可以说是替换吧)。想的很完美,可但是但可是,忽略了一点。每次表单输入,转换的东西都会存到这个自定义数组,越来越多越来越多不会把上一次的值自动清理掉原创 2021-02-04 14:06:58 · 629 阅读 · 0 评论