這次帶給大家如何使用Vue控製字元和位元組顯示個數，使用Vue控製字元和位元組顯示個數的注意事項有哪些，下面就是實戰案例，一起來看一下。
需求
需求：結合Vue實作下面的效果
輸入框中最多輸入16個字元
漢字最多顯示5個，超出部分以...顯示
英文最多顯示10個，超出部分以...顯示
實作
#建構簡單頁面，並設定簡單樣式
在正式開始寫核心程式碼之前，要先把程式碼結構搭建起來，這樣後面寫的時候就會看著簡潔點了。 首先需要一個輸入框用來輸入內容，其次需要一個元素，用來顯示輸入框中的內容，實現資料的雙向綁定。 其中，輸入內容的最大長度是可以透過input標籤的屬性來指定的。
<p id="app">
<input v-model="txt" class="clsinp" maxlength="16" placeholder="请输入内容" type="text">
<p class="clsmsg">
<p>内容：<span>{{txt}}</span></p>
<p>输入的字符个数：<span>{{computedCharLen}}</span></p>
<p>输入的字节个数：<span>{{computedByteLen}}</span></p>
</p>
</p>* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { background: #efefef; }
.clsinp { width: 100%; height: 40px; outline: none; line-height: 40px; font-size: 16px; padding: 0 10px; margin-top: 20px; color: blue; }
.clsmsg { padding: 10px 10px; }
.clsmsg span { color: blue; }var vm = new Vue({
el: '#app',
data() {
return {
txt: ''
}
},
// 后期代码在下面补充
})ASCII範圍內與範圍外
#了解ASCII的內容，請移步至http://www.asciima .com/。
正規表示式/[^\x00-\xff]/g來進行比對。這個時候就提供了一個思路，如果不是ASCII碼中的字符，那麼就預設它佔了兩個字節。
<p id="app">
<input v-model="txt" class="clsinp" maxlength="16" placeholder="请输入内容" type="text">
<p class="clsmsg">
<p>内容：<span>{{txt}}</span></p>
<p>输入的字符个数：<span>{{computedCharLen}}</span></p>
<p>输入的字节个数：<span>{{computedByteLen}}</span></p>
</p>
</p>computed: {
// 获取字符的个数
computedCharLen() {
return this.txt.length
},
// 获取字节的个数
computedByteLen() {
return this.txt.replace(/[^\x00-\xff]/g, '01').length
}
}
控制顯示的內容
內容顯示使用計算屬性來實作：<p>内容：<span>{{computedTxt}}</span></p>// 控制显示的内容
computedTxt() {
return this.methodGetByteLen(this.txt, 10)
}methodGetByteLen方法：
/**
* str 需要控制的字符串
* len 字节的长度，如5个汉字，10个英文，输入参数就是10
*/
methodGetByteLen(str, len) {
// 如果字节的长度小于控制的长度，那么直接返回
if (this.computedByteLen <= len) {
return str
}
for (let i = Math.floor(len / 2); i < str.length; i++) {
if (str.substr(0, i).replace(/[^\x00-\xff]/g, '01').length >= len) {
// Math.floor(i / 2) * 这里是控制特殊情况的显示
// 如 '一二aaa一二三四'，显示的结果就是 '一二aaa一...'
return str.substr(0, Math.floor(i / 2) * 2) + '...'
}
}
}
完整程式碼
最後，貼最終程式碼：Document
<p>内容：<span>{{computedTxt}}</span></p>
输入的字符个数：{{computedCharLen}}
输入的字节个数：{{computedByteLen}}
如何對於create-react- app修改為多頁面支援
#
以上是如何使用Vue控製字元和位元組顯示個數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
