![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
zbailing
这个作者很懒,什么都没留下…
展开
-
element ui组件的自定义类名样式不生效
需要注意,样式不能写在<style scoped>标签中,会被vue自动加上data-v属性,导致样式失效。element ui中,类似描述列表这种组件。必须写在<style>标签里。会提供自定义类名属性。原创 2023-07-07 10:29:03 · 713 阅读 · 0 评论 -
Vue 卸载Better Scroll插件
【代码】Vue 卸载Better Scroll插件。原创 2022-11-01 13:04:40 · 219 阅读 · 0 评论 -
Vue <transition-group> 多组table滚动显示数据 过渡效果案例2
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue <transition-group> 多组table滚动显示数据 过渡效果案例2</title> <!-- 上篇文章的代码,实际使用中发现有bug 比如:如果文本过长,有需要折行的文本,在滚动时,会因为positio...原创 2022-03-10 13:23:15 · 1513 阅读 · 0 评论 -
Vue <transition> 通过动态name属性实现动态过渡案例
<!-- Vue <transition> 通过动态name属性实现动态过渡案例 --><template> <div class="page"> <p> <button @click="switchTransName">switch transitionName</button> </p> <transition :name="tranName"...原创 2022-03-10 09:16:25 · 1147 阅读 · 0 评论 -
Vue <transition> 通过事件钩子实现动态过渡案例2
<!-- Vue <transition> 通过事件钩子实现动态过渡案例2 --><template> <div class="page"> <p> fade in <input type="range" min="0" :max="fadeMax" v-model="fadeInVal"/> fade out <input type="range" min="0" :max="fad...原创 2022-03-09 13:53:43 · 861 阅读 · 0 评论 -
Vue <transition> 用函数式组件实现可复用过渡动画案例
// 在main.js中全局定义<transition>函数式组件Vue.component('my-special-transition', { /* * 设置functional: true则表示该组件为函数式组件 * 函数式组件定义: * 没有管理任何状态,没有监听任何传递给它的状态, * 没有生命周期方法,只是一个接收一些prop的函数 * 没有实例(没有this上下文) * */ functional: true, //...原创 2022-03-08 09:22:52 · 217 阅读 · 0 评论 -
Vue <transition> 实现可复用过渡案例
<!-- Vue <transition> 实现可复用过渡案例--><template> <div class="page"> <button @click="isHello = !isHello">click</button> <mySpecialTransition> <!-- 当有相同标签名的元素切换时, 需通过key属性设置唯一的值来让Vue区分...原创 2022-03-07 15:57:58 · 482 阅读 · 0 评论 -
Vue <transition-group> 多组table滚动显示数据 过渡效果案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue <transition-group> 多组table滚动显示数据 过渡效果案例</title> <style> .table { margin-top: 50px; } ...原创 2022-03-07 10:52:12 · 275 阅读 · 0 评论 -
Vue <transition-group> table滚动显示数据 过渡效果案例(vue.js版)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue <transition-group> table滚动显示数据 过渡效果案例</title> <style> .list-complete-item { transition: all 1s;...原创 2022-03-04 16:19:38 · 647 阅读 · 0 评论 -
Vue <transition-group> <table>数据滚动显示过渡案例
<!-- Vue <transition-group> <table>数据滚动显示过渡案例--><template> <div class="page"> <!-- Vue几乎支持所有原生js dom事件 html dom事件列表:https://www.runoob.com/jsref/dom-obj-event.html --> <table @mouseover="...原创 2022-03-04 14:28:24 · 603 阅读 · 0 评论 -
Vue <transition-group> 列表的删除、增加元素过渡案例
<!-- Vue <transition-group> 列表的删除、增加元素过渡案例--><template> <div class="page"> <p> <button v-on:click="shuffle">Shuffle</button> <button v-on:click="add">Add</button> <but...原创 2022-03-04 11:26:57 · 226 阅读 · 0 评论 -
<transition-group> <table>列表筛选过渡效果案例
<!-- <transition-group> <table>列表筛选过渡效果案例 --><template> <div> <p> <input v-model="query" type="text"/> </p> <table class="table"> <thead> <tr> ...原创 2022-03-04 10:23:58 · 229 阅读 · 0 评论 -
Vue <transition-group> 中<table>列表的排序过渡案例
<!-- Vue <transition-group> 中<table>列表的排序过渡案例--><template> <div class="page"> <p> <!-- <transition-group>的排序过渡动画对<table>元素也好使 --> <button @click="shuffle">shuffle</button>.原创 2022-03-03 16:11:34 · 528 阅读 · 0 评论 -
Vue <transition-group> 列表的排序过渡案例2 - 翻牌、洗牌小动画
<!-- Vue <transition-group> 列表的排序过渡案例2 - 翻牌、洗牌小动画 --><template> <div class="page"> <p class="text-center"> <button @click="shuffle">洗牌</button> </p> <transition-group name="car...原创 2022-03-02 14:10:20 · 667 阅读 · 0 评论 -
Vue <transition-group> 列表的排序过渡案例
<!-- Vue <transition-group> 列表的排序过渡案例 --><template> <div class="page"> <!-- flip n 空翻、轻抛 shuffle vt 洗牌 --> <button @click="shuffle">shuffle</button> <transition-group name="flip-list".原创 2022-03-02 09:34:06 · 722 阅读 · 0 评论 -
Vue <transition-group> 列表的 添加/删除元素 过渡案例2
<!-- Vue <transition-group> 列表的 添加/删除元素 过渡案例2 --><template> <div class="page"> <transition-group name="fade" tag="ul"> <li v-for="(item,index) in items" :key="item.id" class="list-item"> <span>.原创 2022-03-01 17:09:59 · 213 阅读 · 0 评论 -
Vue <transition-group> 列表的 添加/删除元素 过渡案例
<!-- Vue <transition-group> 列表的 添加/删除元素 过渡案例 --><template> <div class="page"> <button @click="add">add</button> <button @click="remove">remove</button> <!-- <transition-group>以一个真.原创 2022-03-01 14:43:07 · 751 阅读 · 0 评论 -
Vue <transition> 多个组件的过渡案例2
<!-- Vue <transition> 多个组件的过渡案例2 --><template> <div class="page"> <div class="text-center"> <input type="radio" v-model="view" value="componentA">a <input type="radio" v-model="view" value="compon.原创 2022-03-01 13:42:52 · 346 阅读 · 0 评论 -
Vue <transition> 多个组件的过渡案例
<!-- Vue <transition> 多个组件的过渡案例 --><!--多个元素之间的过渡,使用key属性来实现多个组件之间的过渡,使用动态组件来实现--><template> <div class="page"> <div> <!-- 在<input>上设置id属性 在<label>上设置for属性 让 id属性的值 = for.原创 2022-03-01 10:52:16 · 400 阅读 · 0 评论 -
Vue <transition> 过渡模式使用案例
<!-- Vue <transition> 过渡模式使用案例 --><template> <div class="page"> <!-- mode属性 in-out 新元素先进行过渡,完成之后,当前元素过渡离开 (先进后出,不经常使用) out-in 当前元素先进行过渡,完成之后,新元素过渡进入 (先出后进,经常使用) --> <transiti.原创 2022-02-28 14:23:26 · 560 阅读 · 0 评论 -
Vue <transition>多个元素过渡 css过渡使用案例
<!-- Vue <transition>多个元素过渡 css过渡使用案例 --><!--<transition>过渡应用于元素的切换效果: 1、元素的显示或隐藏 2、从一个元素切换到另一个元素--><template> <div class="page"> <transition enter-active-class="animate__animated animate__flash"> .原创 2022-02-28 10:03:49 · 179 阅读 · 0 评论 -
Vue <transition>多个元素过渡 css过渡使用案例
<!-- Vue <transition>多个元素过渡 css过渡使用案例 --><template> <div class="page"> <transition name="tra"> <!-- 当有相同标签的元素切换时,需要通过key属性设置唯一的值来标记它们,以此让Vue能过区分它们, 否则Vue为了效率只会替换相同标签内部的内容 --> <bu.原创 2022-02-22 11:34:11 · 768 阅读 · 0 评论 -
Vue <transition>多个元素过渡 自定义过渡类名使用案例
<!-- Vue <transition>多个元素过渡 自定义过渡类名使用案例 --><!--<transition>多个元素过渡动效的使用与单个元素类似--><template> <div class="page"> <!-- 加上appear属性后,浏览器会有初始渲染动效,默认的初始渲染动效为enter-active-class设置的动效 当然,也可以通过 appear-cla.原创 2022-02-22 10:47:36 · 638 阅读 · 0 评论 -
Vue <transition>初始渲染的过渡案例
<!-- Vue <transition>初始渲染的过渡案例 --><!--appear初始渲染过渡,就是浏览器最初渲染已有元素时的开场动效--><template> <div class="page"> <button @click="show = !show">click</button> <!-- 可以通过appear属性设置节点在初始渲染的过渡 appear 必选值.原创 2022-02-21 17:13:13 · 337 阅读 · 0 评论 -
Vue <transition>使用JS过渡的loading动画小案例
<!-- Vue <transition>使用JS过渡的loading动画小案例 --><template> <div class="page"> <button @click="show = !show">Start</button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on.原创 2022-02-21 16:43:16 · 324 阅读 · 0 评论 -
Vue <transition>过渡中的JS钩子
<!-- Vue <transition>过渡中的JS钩子--><template> <div class="page"> <button @click="show = !show">click</button> <transition name="ani" v-on:before-enter="beforeEnter"> <div class="box" v-if="show"&.原创 2022-02-21 15:04:32 · 377 阅读 · 0 评论 -
Vue <transition>过渡动画中使用 animate.css
在<transition>过渡动画中使用,外部css插件 animate.css可以让动画效果更丰富,使用起来更方便<!-- Vue <transition>过渡动画中使用 animate.css--><!--在<transition>过渡动画中使用,外部css插件 animate.css可以让动画效果更丰富,使用起来更方便--><template> <div class="page"> &.原创 2022-02-21 10:03:27 · 557 阅读 · 0 评论 -
Vue <transition>过渡动画案例
<!-- Vue <transition>过渡动画 --><template> <div class="page"> <button @click="show = !show">Toggle show</button> <transition name="bounce"> <!-- 注意: css animation动画无法应用在内联元素(display: i.原创 2022-02-18 11:06:00 · 263 阅读 · 0 评论 -
vue <transition> css过渡案例
<template> <div class="page"> <button @click="show=!show"> toggle </button> <transition name="slide-fade"> <p class="box" v-if="show"><span>hello</span></p> </transiti.原创 2022-02-17 16:07:15 · 135 阅读 · 0 评论 -
Vue单元素/组件进入/离开过渡
<template> <div class="page"> <h1>单元素/组件过渡</h1> <!--为.box元素添加进入/离开过渡--> <transition name="fade" v-for="item in items"> <div class="box" v-if="item.isShow" @click="item.isShow=!item.isShow">{{it.原创 2022-02-17 15:42:10 · 422 阅读 · 0 评论 -
命名视图案例
app.vue<template> <div id="app"> <router-view /> <router-view name="a"/> <router-view name="b"/> </div></template>router.jsexport default new Router({ routes: [ { path: '/',原创 2022-01-20 09:53:12 · 494 阅读 · 0 评论 -
To install it, you can run: npm install --save core-js/modules/es.regexp.dot-all.js
解决方法:cnpm i core-js@3.19.1 --save重新运行好使原创 2021-11-17 13:53:45 · 1585 阅读 · 1 评论 -
vue中使用less
一、首先vue开发环境已经安装成功二、安装less依赖,npm install less less-loader --savenpm install less less-loader --save三、scoped<style lang="less" scoped> .navbar { box-shadow: 0 0 8px rgba(0, 0, 0,...转载 2019-07-03 16:24:47 · 2132 阅读 · 0 评论