VUE基础小白（高级）

柔情只为你懂 2022-12-22 00:45 159阅读 0赞

lookroot学习笔记

## 动态绑定样式 实现按钮点击变色 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center]  
绑定样式 :class=“\{类名：自定义的索引\}”  
点击事件附带索引 实现点击的时候颜色改变

## vuepush添加数据为了避免v-model数据更着变换 ##

![在这里插入图片描述][20201117091728662.png_pic_center]

## es6的过滤 不用v-if ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center 1]

## 实现1-10数字逐渐变大的效果 ##

![在这里插入图片描述][20201117092818944.png_pic_center]

## 过渡样式效果的实现 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center 2]  
**transition 里面如果添加了name=“p”  
就要把样式里面的v-leave-to 改成p-leave-to**

## 使用animate.css ##

引用连接link

## 使用js钩子![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center 3] ##

<transition :css=“false”  
@before-enter=“beforeEnter”  
@enter=“enter”  
@after-enter=“afterEnter”

## 过滤删除 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center 4]

## 实现点击显示不同的效果 类似母版页 实际是组件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][202011171347378.png_pic_center]  
点击123切换不同的数据

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/c4b240dd01f14503a43d3530a249a401.png
[20201117091728662.png_pic_center]: /images/20221120/e182017737094fb2a15786c24af41006.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201117091912237.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw,size_16,color_FFFFFF,t_70#pic_center
[20201117092818944.png_pic_center]: https://img-blog.csdnimg.cn/20201117092818944.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201117093421595.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201117095225214.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201117100803953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201117134722259.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw,size_16,color_FFFFFF,t_70#pic_center
[202011171347378.png_pic_center]: https://img-blog.csdnimg.cn/202011171347378.png#pic_center