vue
vue 功能
qq_43427657
这个作者很懒,什么都没留下…
展开
-
数据变了视图不更新
工作遇到的问题原创 2023-01-05 18:24:53 · 81 阅读 · 0 评论 -
打包部署问题
打包部署的问题原创 2022-12-14 10:18:29 · 92 阅读 · 0 评论 -
vue数据绑定实现
vue数据绑定的实现原创 2022-07-18 15:42:13 · 211 阅读 · 0 评论 -
vue 导出PDF
// 安装 vue-to-pdf 1 npm i vue-to-pdf --save 2 在main.js 引入 import vueToPdf from 'vue-to-pdf' Vue.use(vueToPdf)// 全部代码<template> <div id="app" ref="exportPdf"> <el-table :data="tableData" style="width: 100%"> <el-转载 2021-07-01 16:32:40 · 216 阅读 · 0 评论 -
vue 表单数据修改了页面数据也会跟着改
// 原先写法: this.editForm = row// 修改后的写法 this.editForm = JSON.parse(JSON.stringify(row))原创 2021-06-24 20:44:11 · 1083 阅读 · 4 评论 -
watch 深度监听
<template> <div class="about"> <p>about</p> <span>{{obj.name}}</span> <button @click="handleName">改名</button> </div></template><script>export default { data(){ retu原创 2021-05-20 18:01:22 · 1359 阅读 · 0 评论 -
2021-05-20
具名插槽如下://home组件代码<template> <div class="home"> <About> <div slot="slot1">你好啊插槽1</div> <div slot="slot2">你好啊插槽2</div> <div slot="slot3">你好啊插槽3</div> </About> </di原创 2021-05-20 17:28:37 · 69 阅读 · 0 评论 -
动态类名样式
对象方式添加 <template> <div> <ul> <li class="item ">首页</li> <li class="item" :class="{'active':isActive}">详情</li> <li class="item">列表</li> </ul> </div></templat原创 2021-05-20 16:09:35 · 67 阅读 · 0 评论 -
vue 路由传参
方法一: <button @click="toClick(3)">查看</button> 点击跳转携带参数 toClick(id){ this.$router.push({ path: `/detail/${id}`, }) } 配置路由: { path: '/detail/:id', name: 'detail', compo原创 2021-04-26 12:21:12 · 125 阅读 · 0 评论 -
vue实现点击复制功能
代码如下: <el-table-column label="操作" align="center"> <template slot-scope="scope"> <el-button type="text" @click="handleCopy(scope.$index, scope.row)">复制链接</el-button>转载 2020-10-21 17:05:16 · 373 阅读 · 0 评论 -
时间过滤器
在工作中需求是这样的:2020-10-10但是后台给我的数据是这样的:2020-10-05 14:04:37处理如下:新建一个js文件写入:import Vue from 'vue'Vue.filter('filterTime', function(time, s) { let y = time.getFullYear() let m = time.getMonth() + 1 let d = time.getDate() retur原创 2020-10-13 16:03:03 · 468 阅读 · 0 评论 -
保留几位小数点
价格保留几位小数点:使用过滤器:filters filters: { //过滤器 priceFilter: function (data, n) { return "¥" + data.toFixed(n); } }在需要保留小数点的地方使用: 保留两位小数点: priceFilter(2) <p class="price">{{ v.price | priceFilter(2) }}</p原创 2020-09-25 19:04:28 · 99 阅读 · 0 评论 -
vue 防重复点击事件
export default { install (Vue) { // 防重复点击(指令实现) Vue.directive('preventReClick', { inserted (el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout((转载 2020-09-25 18:49:18 · 359 阅读 · 0 评论 -
vue 定时器使用
在vue使用定时器,定时器清不掉应当手动清除<template> <div>{{count}}</div></template><script>export default { data() { return { count: 2, timer: null }; }, mounted() { this.timer原创 2020-09-01 11:14:53 · 135 阅读 · 0 评论 -
vue bus
vue bus使用新建bus.jsimport Vue from 'vue'const bus = new Vue()export default bus 在需要用到的组件引入import bus from "../bus"在A组件使用传参: e:需要传的参数 bus.$emit('handClick',e)在B组件使用:e:接收传过来的参数mounted () { bus.$on('handClick', e=>{ console.log(e)原创 2020-08-31 10:47:28 · 132 阅读 · 0 评论 -
vue 登录密码显示与隐藏
代码如下: <el-form-item v-if="visible" label="密码" prop="password" style="margin-bottom:10px"> <el-input v-model.number="form.password" type="text"></el-input> <img :src="show" @click="showPass('show')" class="icon-xiansh原创 2020-07-27 14:27:55 · 847 阅读 · 0 评论 -
watch
watch监听数据变化 <button @click="num = true">watch</button> <button @click="num = false">停止</button> data () { return { num: false, count:0 } } watch: { num(cur, old) { console.log(cur, old);原创 2020-07-22 16:08:31 · 172 阅读 · 0 评论 -
vue图片上传
<template> <div> <input type="file" accept="image/*" @change="changeImage()" ref="avatarInput" style="display:none" /> <div class="pic_list_box"> <div class="pic_list" v-show="img转载 2020-07-04 11:16:05 · 98 阅读 · 0 评论 -
vue前端实现文件下载
get请求 <el-button @click="domLoad()">导出</el-button> domLoad() { this.$axios({ method: "get", url: "url", responseType: "blob" }).then(res => { let blob = new Blob([res.data], { type: "applica原创 2020-07-03 18:00:12 · 812 阅读 · 0 评论