Vue.js
文章平均质量分 53
前端小白۞
这个作者很懒,什么都没留下…
展开
-
vue实现excel表格复制粘贴
说明想要实现从excel表格复制内容之后,在vue页面上粘贴。有两个情况(1)无论从哪一列点击开始粘贴,都是从点击的列开始粘贴。效果如上图1(2)点击哪一列开始粘贴,从此列开始粘贴,如果点击的列不是可以粘贴的列,那么也是从可以粘贴的列开始粘贴(只能点击可以粘贴列的前面列才可以粘贴,点击后面列不能粘贴)效果如上图2注意如果多列需要粘贴,那么这些列必须是。比如columns=[name,key,age],那么不能只粘贴{name,age},中间。.........原创 2022-07-20 11:45:55 · 4123 阅读 · 2 评论 -
element ui动态渲染表单(数组)并验证
element ui动态渲染表单(数组)并验证1、需求:点击编辑按钮,弹出编辑框(表单),从后端拿到字段后动态渲染到页面上,并校验必填2、代码实现其中:specialColumns是从后端拿到的json数组,格式如下:[ { columnName: "操作" columnType: "enumeration" columnValue: "再次上报,废弃" controlId: "FormProperty_08tc63f"原创 2022-05-16 13:44:19 · 2931 阅读 · 1 评论 -
页面滚动定位
页面滚动定位一、文本框类型的滚动介绍:点击右侧框,左侧对应的文本框出现红色边框并定位到此处。1、效果图2、代码实现<template> <div id="app"> <Row> <Col span="16" v-for="(item,i) in list"> <Input style="width: 95%;margin: 10px 0" v-model="item.templateNa原创 2022-05-07 18:30:43 · 564 阅读 · 0 评论 -
Vue中异步:Async和await的使用(echarts画图,DOM渲染的时候,还没有请求到数据)
Vue中异步:Async和await的使用(echarts画图,DOM渲染的时候,还没有请求到数据)首先看示例:async function test() { console.log(0) await console.log(111);//在第一个await表达式出现之前,异步函数内部的代码都是按照同步方式执行的 console.log(555) //倒数第二个输出 console.log(556665)//最后一个输出 } function test1(){原创 2021-11-03 14:22:44 · 1976 阅读 · 0 评论 -
Vue简单组件封装之按钮组件
Vue简单组件封装之按钮组件实现效果:传递不同的属性值,按钮名称和按钮颜色不一样封装组件代码:<template><input type="button" :class='type' :value='name' @click="defaultClick"></input></template><script>export default { name: "CoolButton", methods: { default原创 2021-12-06 16:14:17 · 1394 阅读 · 0 评论 -
Vue的Render函数的参数
Vue的Render函数的参数render函数返回值的第一个参数:必选 可选类型:1、string:html标签 2、object:一个含有数据选项的对象 3、function:返回一个含有数据选项的对象示例: Vue.component('child', { props: ['level'], render: function (createElement) { //string:原创 2021-11-16 10:50:05 · 2887 阅读 · 0 评论 -
vue相关知识点随记
vue随记1. 计算属性中定义的方法里面包括get和set方法,get方法根据其他属性值动态计算当前属性值,set方法监视当前属性变化,更新其他属性值2. 父子组件中,子组件不能直接修改父组件的值,需要通过$emit方法修改父组件的值;子组件通过props接受父组件的属性,父组件修改时,子组件对应自动修改3. computed计算属性,methods方法,watch监听区别:这三者都可以定义方法,methods定义普通方法,watch在监听经常变化的属性时使用,computed只在相关的响应式依赖发生原创 2021-10-13 09:47:51 · 115 阅读 · 0 评论 -
vue实现分页的两种方式
vue实现分页的两种方式(1)方法一:使用slice方法一次调用后端接口返回所有数据tableData,然后使用tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)使得数据根据页码改变 <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe style="width: 100%"> <原创 2021-11-22 10:00:41 · 10571 阅读 · 2 评论 -
Vue中v-if、v-show、display:none和visibility:hidden的区别
Vue中v-if和v-show与display:none和visibility: hidden的区别1、v-if="false"和v-show="false"以及display:none都是网页中不占任何的位置。v-show="false"相当于display:none;2、visibility: hidden;只是单纯的隐藏元素,占据位置3、v-if="false"的时候在控制台状态是注释状态没有实际渲染v-show与 v-if 比较v-show 指令的功能与 v-if 指令相似。不过 v-i原创 2021-10-28 10:00:14 · 5218 阅读 · 0 评论 -
创建vue项目步骤
前提:安装node环境一、搭建vue项目1.全局安装vue-clinpm install --global vue-cli2.进入你的项目目录,创建一个基于 webpack 模板的新项目[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EuyCL3cl-1617344228865)(C:\Users\xuzhenzhen\AppData\Roaming\Typora\typora-user-images\image-20210402134726139.png)]说明原创 2021-04-02 14:17:43 · 3614 阅读 · 0 评论 -
Vue中computed和watch的区别
Vue中computed和watch的区别watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个或多个数据(称它们为依赖数据)发生变化的时候,所有依赖这些数据的 “相关” 数据 “自动” 发生变化,也就是自动调用相关的函数去实现数据的变动。(1)computed1、 支持缓存,只有依赖数据发生改变,才会重新进行计算;2、 不支持异步,当computed内有异步操作时无效,无法监听数据的变化;3、 computed是计算属性,也就是依赖某个值或者prop原创 2021-12-09 10:27:25 · 9282 阅读 · 0 评论