demo
文章平均质量分 54
你说个灯儿
这个作者很懒,什么都没留下…
展开
-
vue 局部刷新
1、在APP.vue中写入<template> <div id="app"> <!--v-if控制组件的更新渲染--> <router-view v-if="isRouterlive" /> </div></template><script>export default { //父组件给子孙提供一个方法,在需要使用局部刷新的组件中引入 provide() { ret原创 2022-03-14 15:27:54 · 1154 阅读 · 0 评论 -
列表demo
列表样式demo<view class="staff_box" v-else> <view class="team_box" v-for=" (list,n) in staffList"> <view > <view class="team_title" @click="list.checkClass = !list.checkClass"> <text>{{list.class}}</text> <.原创 2022-02-16 17:13:32 · 179 阅读 · 0 评论 -
兄弟组件之间通信
inject 兄弟组件之间通信场景:building组件去改变nav组件的count值路由{ path:'project/Home', name:'project_home', component:()=>import('../views/project/Home.vue'), //项目级地址 children:[ { path:'/project/Home/building',原创 2021-08-02 16:44:12 · 258 阅读 · 0 评论 -
跑马灯插件 vue-seamless-scroll
vue跑马灯插件 vue-seamless-scroll全局安装:npm i vue-seamless-scroll --save引入main.js中:import scroll from 'vue-seamless-scroll'Vue.use(scroll)跑马灯组件<template> <div class="page-example3"> <vue-seamless-scroll :data="listData" :class-opti原创 2021-08-02 16:13:09 · 1262 阅读 · 0 评论 -
上传图片 文件封装
上传文件封装components 里面的上传文件子组件<template> <el-upload ref="uploadBox" class="upload-demo" drag action="*" :before-upload="handlebefore" :before-remove="handleremove" :on-exceed="handleexceed" :file-list="value" :auto-upload="true"> </el-u原创 2021-07-30 18:00:09 · 77 阅读 · 0 评论 -
防抖和节流的区别
记录一下防抖和节流的区别防抖(debounce)防抖(throttle)防抖(debounce)示例环境:点击事件。倒计时n秒,只认最后点击的那一次。每一次点击都会重新计时,直到最后一次点击。从最后一次点击开始倒计时n秒,再触发事件。防抖(throttle)示例环境:点击事件。倒计时n秒,在n秒内不管点击多少次,只会间隔n秒触发一次事件。<template> <div> <button @click="printDebounce">防抖</bu原创 2021-06-17 16:50:06 · 84 阅读 · 0 评论 -
鼠标点击后,文字颜色改变
<template> <--导航条--> <div class="navList"> <p class="navgatorLi" :class="{checkColor:item.ischeck}" v-for="(item,index) in navgator" :key="index" @click="changeColor(index)" > {{item.title}}原创 2021-03-08 18:16:46 · 1960 阅读 · 0 评论 -
点击导航栏内容,滚动到指定位置
<template> <div class=“home”> <-- 导航菜单--> <div class="navList"> <p class="navgatorLi" v-for="(item,index) in navgator" :key="index" @click="handleLeft(index)" > {{item.title}} </p> </div>原创 2021-03-08 18:02:54 · 1770 阅读 · 0 评论 -
点击同一个按钮,切换内容
关于点击同一个按钮,切换内容的demo。vue.jshtml代码<template> <div class="test"> <!-- 点击按钮 --> <button @click="change()" :class="{active:index}">下一个</button> <!-- 切换内容 --> <div id="tab"> <div v-show="index原创 2021-02-05 10:40:10 · 1276 阅读 · 0 评论