如何使用Vue控製字元和位元組顯示個數

這次帶給大家如何使用Vue控製字元和位元組顯示個數，使用Vue控製字元和位元組顯示個數的注意事項有哪些，下面就是實戰案例，一起來看一下。

需求

需求：結合Vue實作下面的效果

1. 輸入框中最多輸入16個字元

2. 漢字最多顯示5個，超出部分以...顯示

3. 英文最多顯示10個，超出部分以...顯示

實作

#建構簡單頁面，並設定簡單樣式

在正式開始寫核心程式碼之前，要先把程式碼結構搭建起來，這樣後面寫的時候就會看著簡潔點了。

首先需要一個輸入框用來輸入內容，其次需要一個元素，用來顯示輸入框中的內容，實現資料的雙向綁定。

其中，輸入內容的最大長度是可以透過

input標籤的屬性來指定的。

<p>
 <input>
 </p><p>
  </p><p>内容：<span>{{txt}}</span></p>
  <p>输入的字符个数：<span>{{computedCharLen}}</span></p>
  <p>输入的字节个数：<span>{{computedByteLen}}</span></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; }

最後一步應該是引入Vue，然後建立一些簡單的資料內容。

var vm = new Vue({
 el: '#app',
 data() {
  return {
   txt: ''
  }
 },
 // 后期代码在下面补充
})

ASCII範圍內與範圍外

#了解ASCII的內容，請移步至

http://www.asciima .com/。

ASCII中包含256個字符，因此超過256之外的字符，全部都是非ASCII字符，一般情況下，漢字就是在這個範圍中。

因此，編碼不在0-255的字元可以使用

正規表示式/[^\x00-\xff]/g來進行比對。這個時候就提供了一個思路，如果不是ASCII碼中的字符，那麼就預設它佔了兩個字節。

我們修改一下頁面結構，輸出一些測試資訊：

<p>
 <input>
 </p><p>
  </p><p>内容：<span>{{txt}}</span></p>
  <p>输入的字符个数：<span>{{computedCharLen}}</span></p>
  <p>输入的字节个数：<span>{{computedByteLen}}</span></p>
 

補充需要的計算屬性：

computed: {
 // 获取字符的个数
 computedCharLen() {
  return this.txt.length
 },
 // 获取字节的个数
 computedByteLen() {
  return this.txt.replace(/[^\x00-\xff]/g, '01').length
 }
}

這個時候，我們輸入內容，出現下面的效果：

這個時候會發現，已經實現，ASCII碼範圍內的佔1位，超出範圍的佔2位。

控制顯示的內容

內容顯示使用計算屬性來實作：

<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) {
   // Math.floor(i / 2) * 这里是控制特殊情况的显示
   // 如 '一二aaa一二三四'，显示的结果就是 '一二aaa一...'
   return str.substr(0, Math.floor(i / 2) * 2) + '...'
  }
 }
}

最終的顯示情況沒有超過最大指定長度的情況

#超過最大指定長度(漢字輸入)

超過最大指定長度(數字輸入)

超過最大指定長度(漢字與字母的組合)

完整程式碼

最後，貼最終程式碼：

nbsp;html>


 
 
 
 
 


 

  
  

   
<p>内容：<span>{{computedTxt}}</span></p>
   
输入的字符个数：{{computedCharLen}}
   
输入的字节个数：{{computedByteLen}}
  
 


<script></script>
<script>
 var vm = new Vue({
  el: &#39;#app&#39;,
  data() {
   return {
    txt: &#39;&#39;
   }
  },
  // 后期代码在下面补充
  methods: {
   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, &#39;01&#39;).length >= len) {
      return str.substr(0, Math.floor(i / 2) * 2) + &#39;...&#39;
     }
    }
   }
  },
  computed: {
   // 获取字符的个数
   computedCharLen() {
    return this.txt.length
   },
   // 获取字节的个数
   computedByteLen() {
    return this.txt.replace(/[^\x00-\xff]/g, &#39;01&#39;).length
   },
   // 控制显示的内容
   computedTxt() {
    return this.methodGetByteLen(this.txt, 10)
   }
  }
 })
</script>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼實作微信小程式的自訂多選事件

如何對於create-react- app修改為多頁面支援
#

以上是如何使用Vue控製字元和位元組顯示個數的詳細內容。更多資訊請關注PHP中文網其他相關文章！