- Vue.js 2 Web Development Projects
- Guillaume Chau
- 200字
- 2021-07-02 22:34:30
Text stats
The last stats we can display are more "writer-oriented"--the lines, words, and characters count:
- Let's create three new computed properties for each counter, with some Regular Expressions to get the job done:
computed: { linesCount () { if (this.selectedNote) { // Count the number of new line characters return this.selectedNote.content.split(/\r\n|\r|\n/).length } }, wordsCount () { if (this.selectedNote) { var s = this.selectedNote.content // Turn new line cahracters into white-spaces s = s.replace(/\n/g, ' ') // Exclude start and end white-spaces s = s.replace(/(^\s*)|(\s*$)/gi, '') // Turn 2 or more duplicate white-spaces into 1 s = s.replace(/\s\s+/gi, ' ') // Return the number of spaces return s.split(' ').length } }, charactersCount () { if (this.selectedNote) { return this.selectedNote.content.split('').length } }, }
Here, we added some conditions to prevent the code from running if no note is currently selected. This will avoid crashes if you use the Vue devtools to inspect the app in this case, because it will try to compute all the properties.
- You can now add three new stat span elements with the corresponding computed properties:
<span class="lines"> <span class="label">Lines</span> <span class="value">{{ linesCount }}</span> </span> <span class="words"> <span class="label">Words</span> <span class="value">{{ wordsCount }}</span> </span> <span class="characters"> <span class="label">Characters</span> <span class="value">{{ charactersCount }}</span> </span>
The final status bar should look like this:

推薦閱讀
- Advanced Splunk
- 實戰Java程序設計
- Mastering LibGDX Game Development
- Redis Essentials
- Android程序設計基礎
- Procedural Content Generation for C++ Game Development
- Developing SSRS Reports for Dynamics AX
- Penetration Testing with the Bash shell
- C語言程序設計實踐
- Web前端開發最佳實踐
- Mastering Leap Motion
- 從零開始學算法:基于Python
- Java服務端研發知識圖譜
- 現代JavaScript編程:經典范例與實踐技巧
- 零基礎入門Python數據分析與機器學習