首頁 > web前端 > js教程 > 主體

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

php中世界最好的语言
發布: 2018-05-29 10:04:06
原創
3821 人瀏覽過

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

需求

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

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

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

  3. 英文最多顯示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; }
登入後複製
最後一步應該是引入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 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
 }
}
登入後複製
這個時候,我們輸入內容,出現下面的效果:

這個時候會發現,已經實現,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) {
  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) {
   // Math.floor(i / 2) * 这里是控制特殊情况的显示
   // 如 '一二aaa一二三四',显示的结果就是 '一二aaa一...'
   return str.substr(0, Math.floor(i / 2) * 2) + '...'
  }
 }
}
登入後複製
最終的顯示情況沒有超過最大指定長度的情況

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

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

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

完整程式碼

最後,貼最終程式碼:




 
 
 
 Document
 


 

     

   <p>内容:<span>{{computedTxt}}</span></p>    

输入的字符个数:{{computedCharLen}}

   

输入的字节个数:{{computedByteLen}}

  

 

登入後複製
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

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

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!