vue3中h函数的使用

h()函数的作用是用来创建虚拟 DOM 节点

它里面可以接收三个参数, 第一个参数既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件定义。第二个参数是要传递的 prop,第三个参数是子节点。具体是一种什么样的形式呢,要怎么样使用呀,请看下面!!!

我就结合我做项目时候遇到使用h函数的地方来给大家讲解。

 然后大家看一下效果!        

 假如我们不想让头像这一栏显示文字,而是显示图片,这时候我们可以把div标签换成头像组件,

如下图 ↓

最后效果是这样的。

 

 

 

 

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue 3实现动画过渡滚动到固定高度的效果,您可以使用Vue的`transition`组件和`scroll-behavior`属性来实现。以下是一个示例: HTML: ```html <template> <div> <button @click="scrollToTop">滚动到顶部</button> <transition name="fade"> <div class="content" v-show="showContent">这是一些内容...</div> </transition> </div> </template> ``` CSS: ```css .content { height: 1000px; /* 设置内容的高度 */ overflow-y: scroll; /* 允许内容出现滚动条 */ scroll-behavior: smooth; /* 启用平滑滚动效果 */ } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; /* 设置过渡动画的持续时间 */ } .fade-enter, .fade-leave-to { opacity: 0; /* 设置初始和最终状态的透明度 */ } ``` Vue组件: ```javascript <script> import { ref } from 'vue'; export default { setup() { const showContent = ref(true); const scrollToTop = () => { showContent.value = false; setTimeout(() => { window.scrollTo({ top: 0, /* 滚动到顶部的位置 */ behavior: 'smooth' /* 使用平滑滚动效果 */ }); showContent.value = true; }, 500); // 等待过渡动画完成后再滚动到顶部 }; return { showContent, scrollToTop }; } }; </script> ``` 在上面的示例,我们使用Vue 3的`ref`函数来创建响应式的`showContent`变量,控制内容的显示和隐藏。当点击"滚动到顶部"按钮时,我们首先将`showContent`设置为`false`,触发内容的淡出过渡动画。然后使用`setTimeout`延迟500毫秒,等待过渡动画完成后,再使用`window.scrollTo`方法将页面滚动到顶部位置,并将`showContent`重新设置为`true`,触发内容的淡入过渡动画。 请注意,上述示例使用了简单的延迟来等待过渡动画完成,实际项目可能需要根据具体情况进行调整。另外,您可以根据需要修改内容的高度和过渡动画的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值