CSS写Vue静态页面的动效:

最新推荐文章于 2024-08-19 08:00:00 发布

原创最新推荐文章于 2024-08-19 08:00:00 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #vue.js #vue #css

前端vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Vue框架中利用CSS元素实现鼠标移入移出的动态效果。通过具体代码示例，展示了如何借助Vue事件处理机制改变CSS样式，包括背景颜色的变化等，为网页增添互动性。

想法就是 ,通过在Vue中植入事件 , 事件获取css的节点元素 ,通过鼠标的移入, 移除的触发, 实现触动的事件;

１－创建Vue框架系统：　

以Ｖｕｅ作为基础框架，发版简单，

２－使用Ｖｕｅ页面，　填充Ｃｓｓ

使用ｃｓｓ作为页面的元素，　填充内容，　作为静态的资源　；　

３－页面特效

３－１鼠标移入　移出：

//两个事件同时存在, 移入 和 移除  

 // 移入  $event 携带的参数是当前的元素节点
@mouseenter="enter($event)"
 // 移除
@mouseleave="leave($event)"

// 方法区 
enter(e){
    // e表示获取倒了当前css属性class ; 
    e.target.style.backgroundColor =  "#efefef"
}
leave(e){
    e.target.style.backgroundColor =  "#fff"
}

// ========================
// 第一种方式, 直接修改属性
e.target.style.background  = "#FFDA81"
// 第二种方式, 直接修改class引用 , 这种方式提前写好多个class的样式
e.currentTarget.className="seven7";


//通过log打印出来获取当前节点的元素 ; 选定元素 ; 最后使用 .style.color = "" 属性
获取子元素
children

如果是其他类型的表单, 可以用插件的, 用插件也行; 上述笔记提供给需要用CSS需求的 ;

也可以适当的增加v-if的手段控制隐藏和展示;

:Class= 进行class效果的双向绑定;