Vue
小鱼爱曲奇
测试开发,专注测开全栈学习。技能包括python、vue、k8s、gitlab、shell等。
展开
-
Vue结合element UI组件 el-autocomplete 使用 ,解决根据选择类型来决定输入建议的数据延迟问题
element UI组件 el-autocomplete 应用 ,解决根据选择类型来决定输入建议的数据延迟问题原创 2024-07-19 14:26:17 · 568 阅读 · 0 评论 -
Vue+element UI组件 el-autocomplete 应用 ,解决根据选择类型来决定输入建议的数据延迟问题
Vue+element UI组件 el-autocomplete 应用 ,解决根据选择类型来决定输入建议的数据延迟问题原创 2024-07-19 11:40:44 · 329 阅读 · 0 评论 -
Vue-小知识记录
vue平时编程中,碰见的需要记录的小知识点记录原创 2023-01-17 10:57:14 · 74 阅读 · 0 评论 -
Vue 根据返回值使用不同的class
vue template中 el-select下el-option 根据迭代的index的偶奇数使用不同的背景颜色:class="classfunction" ,classfunction不同的条件返回不同的值, <el-select v-model="ad_info.style" placeholder="请选择"> <el-option :clas原创 2022-03-16 10:00:20 · 2248 阅读 · 0 评论 -
el-switch 初始值问题:初始取值不是设定的值
el-switchis_simple初始值是true,但是进去页面,el-switch是false状态。为什么取不到初始值?解决方法active-value="true" 变成:active-value="true"inactive-value="false"变成:inactive-value="false"<el-switch class="version_switch" v-model="is_simple" .原创 2021-09-16 14:31:44 · 1649 阅读 · 2 评论 -
Vue checkbox 处理有层级关系的元素
准备实现这样一个功能,如图选中一级步骤,所有的子级步骤都选中,取消选中一级步骤,所有的 子级步骤都取消选中其中一级步骤是li元素,二级步骤是li中的ul下的li,代码结果大致如下: <ul v-for="(step,index) in operate_steps" :key="index" class="list-group text-ul"> <li class="ol-list list-group-item" :class="checkd_op.原创 2021-08-26 15:33:05 · 448 阅读 · 0 评论 -
Vue el-table报错 Duplicated keys detected This may casuse an update error
错误类似于使用的组件是el-table,结合接图中提示,应该是tl-table再渲染行节点的时候key重复了。el-table 有个 el-key的属性。本人赋值的是:row-key="step_id"结合数据,step_id确实有重复。改为:row-key="id"一个不会重复的key值,问题就解决了。...原创 2021-08-17 16:05:51 · 3220 阅读 · 1 评论 -
Vue 计算变量computed
本人的使用场景是希望在子组件中取到父主件传递过来的props Object变量,showData是传递来的属性变量 props:["showData"],刚开始是在created和mounted中去赋值,发现都未能取到值后来想到了计算变量 computed:{ checked_showData:function(){ // return JSON.parse(JSON.stringify(this原创 2021-08-13 18:53:31 · 516 阅读 · 0 评论 -
Vue 中 v-if 用于判断某个变量是否在列表中
本人使用的方法是 list列表的includes函数判断name变量是否包含中['name1','name2','name3']中,是可以跑通的 v-if="['name1','name2','name3'].includes(name)查了网上还有一种方式v-if="name in ['name1','name2','name3']"却达不到效果(即使上面第一种方式为true时候第二种还是为false),我也不知道为啥不行。希望知道的大佬告知下为什么。。。...原创 2021-08-13 18:46:32 · 6194 阅读 · 1 评论 -
el element 组件el-checkbox
el-checkbox是多选框<el-checkboxv-if="row.is_sub==0"v-model="row.checked":checked="row.checked":label="row.name"@change="new_change_res(row)"></el-checkbox>v-if 是Vue的关键字,表示row.is_sub==0为真则现在这个checkbox DOM元素v-model绑定的数据是value...原创 2021-08-13 18:38:09 · 3880 阅读 · 0 评论 -
Vue2的router-view中子组件与父组件传值
子组件与父组件传值是通过在子组件中,定义$emit,向父组件发射一个事件,及带上传的值。父组件监听这个事件,然后调用这个事件的函数,传值是传到这个函数参数中的。 this.$emit('changeActiveStep',3);事件名:changeActiveStep传值:3具体如下:场景是,app.vue中定义一个展示当前进度的变量,这个值随着app.vue 中router-view跳转到component1,值表示为第一步,跳转到component2,值表示为第二步实现为:1,在原创 2021-05-21 11:27:16 · 4106 阅读 · 0 评论 -
Vue 更新list
Vue中使以下方式操作list 是无法让Vue感知到数据的变化,进而无法更新视图当利用索引直接设置数组项时:items[index]=newValue当修改数组的长度是:items.length=newValue解决方法:可采用Vue的set方法和splice方法实现索引赋值的效果,还能够触发视图更新// Vue.setVue.set(example1.items, indexOfItem, newValue)// Array.prototype.splice`exa..原创 2021-08-13 17:57:24 · 1909 阅读 · 0 评论 -
Vue 技术点-持续更新
1,select标签结合v-for使用 <el-select v-model="tem_id" placeholder="请选择模板" @change="select_t()"> <el-option v-for="(item,index) in temp_list" :key="index" :label="item.name" :value="item.id" ></el-opt原创 2021-08-04 10:40:14 · 90 阅读 · 0 评论 -
Vue router-view的使用
1,默认视图,就是转换的默认视图router path 中加上redirect2 router-view嵌套<div id="app"> <router-view></router-view></div>const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> .原创 2021-08-02 10:03:00 · 311 阅读 · 0 评论 -
element-ui 的el-tree组件:
1,e-tree组件 <el-tree :data="pdata" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"> <span class="custom-tre原创 2021-07-28 20:12:02 · 887 阅读 · 0 评论 -
vue使用总结 class ,v-if反向判定,且:&&,或:||
1 ,vue中class根据变量值是否为none,决定是否展现div<div :class="form.id_tag_SetReplicationTo2?'border-class':''">注意:不是:class="{{form.id_tag_SetReplicationTo2}}?'border-class':''" 而是直接使用2,vue中v-if 反向判定<i class="el-icon-download iclass" v-if="!form.id_tag_原创 2021-07-28 19:11:01 · 8505 阅读 · 0 评论 -
Flask template中使用Vue
Flask template中使用Vue,用法总结,包括如何在template中引用vue中变量,如何将vue变量结合其他字符串组合成一个属性值原创 2021-07-15 18:47:18 · 1415 阅读 · 0 评论 -
关于Vue对象取属性值undefined
记一次 Vue 关于对象取属性值报错昨天写Vue前端代码,卡在了一个点上,取对象值,是存在的,但是存对象的属性值,一直undefined的。为此苦恼很久。结果是因为,属性写错了,写错的点是,后端mock的数据对象,在Vue mounted中请求后端数据传递到前端的。在后台传入的mock数据,误写为:“name:”:value多了:分号导致前端取对象属性name,data.name 取不到值,当时还信心满满认为肯定是Vue组件周期导致的取不到属性值,网上搜索半天,压根没考虑到是属性名字写错的这个最简原创 2021-05-25 11:10:15 · 10166 阅读 · 1 评论