最近在寫個人Blog 中間看過很多個人部落格的開發 一大部分用的是Hexo框架或者vuePress框架 匯入各種主題樣式外掛等等
但是看多了就會發現 很多博主的個人部落格基本都很相似 並沒有什麼新東西呈現出來 我這裡是實話實說 雖然很多相似之處
但是確實是簡單易用 對開發者很友好 最近我也在考慮要不要把我的部落格換成Hexo框架來寫 這都是後話了。 今天主題是說
一個很常見的效果 就是打字機效果 這裡附上我部落格的視訊供各位先參考瞭解一下
如果視訊點不開就訪問這個連結吧：vue自動打字機效果 Typewriter
就是類似這樣的效果 這裡用到的是Typewriter
下面附上程式碼：
template :
<h5>
<p class="typewriter">{{typewriter}}</p>
</h5>
data :
<script>
export default {
data() {
return {
typewriter: '',
i: 0,
timer: 0,
str: '//輸入你要顯示的的文字',
}
},
methods :
methods: {
typeing() {
if (this.i <= this.str.length) {
this.typewriter = this.str.slice(0, this.i++)
this.timer = setTimeout(() => {
this.typeing()
}, 80)
} else {
clearTimeout(this.timer)
}
},
}
注意：
以上 喜歡就點個贊再走吧