vue实现自动打字效果(带光标效果)

代码介绍(其实就是通过字符串截取加定时拼接完成的,我相信有时间都能琢磨出来,来这里就是为了省事)

上vue页面代码:

javascript 复制代码
<template>
  <div id='App'>
    <h2>{{text}}<span ref="fou" class="fousdis">{{'_'}}</span></h2>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      initialText: '这是一个打字教程打字教程,。,。,777',
      index: 0,
      text: ''
    }
  },
  mounted() {
    setInterval(() => {
      this.autoTyping()
      var tim = setInterval(() => {
              this.$refs.fou.classList.toggle('fousdis')
               if (this.index === this.text.length) {
                    clearInterval(tim)
                      }
            }, 150)
    }, 300)
  },
  methods: {
    autoTyping() {
      this.index++
      this.text = this.initialText.slice(0, this.index)
      // this.index = this.text.length === this.initialText.length ? 0 : this.index  //实现循环打字
    }
  }
}
</script>
<style >
.fousdis{
  display: none;
}
</style>

老规矩:复制粘贴那去看效果

相关推荐
一点七加一3 分钟前
Harmony鸿蒙开发0基础入门到精通Day01--JavaScript篇
开发语言·javascript·华为·typescript·ecmascript·harmonyos
Fantastic_sj25 分钟前
JavaScript 数组方法和属性详解
javascript
JA+39 分钟前
vue 实时数据表格组件 (stk-table-vue)
前端·javascript·vue.js
那年窗外下的雪.1 小时前
鸿蒙ArkUI布局与样式进阶(十二)——自定义TabBar + class类机制全解析(含手机商城底部导航案例)
开发语言·前端·javascript·华为·智能手机·harmonyos·arkui
IT_陈寒1 小时前
Python性能优化:5个被低估但效果惊人的内置函数实战解析
前端·人工智能·后端
00后程序员张1 小时前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
Rysxt_1 小时前
Electron 与 uni-app 区别教程:如何选择适合你的跨平台开发框架?
javascript·electron·uni-app·跨平台
似水流年QC1 小时前
Electron 实战|Vue 桌面端开发从入门到上线
vue.js·electron·桌面端
前端架构师-老李1 小时前
15、Electron专题:使用 electron-store 进行本地数据存储
前端·javascript·electron