How to use Vue to control the number of characters and bytes displayed

This time I will show you how to use Vue to control the number of characters and bytes displayed, and how to use Vue to control the number of characters and bytes displayed. What are the precautions?The following is a practical case, let's take a look take a look.

Requirements

Requirements: Combined with Vue to achieve the following effect

1. Maximum input in the input box 16 characters

2. Chinese characters can be displayed at most 5, and the excess characters are displayed with ...

3. English characters can be displayed at most 10 , the excess part is displayed with ...

to achieve

construction Simple page, and set a simple style

Before officially starting to write the core code, you must first set up the code structure, so that it will look simpler when you write it later.

Firstly, an input box is needed to input content, and secondly, an element is needed to display the content in the input box to achieve two-way binding of data.

Among them, the maximum length of the input content can be specified through the attributes of the input tag.

<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>

The structure of the page has been completed, so the next step is to do some simple style optimization.

* { 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; }

The last step should be to introduce Vue and then build some simple data content.

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

ASCII within and outside the range

To understand the content of ASCII, please go tohttp://www.asciima .com/.

ASCII contains 256 characters, so characters beyond 256 are all non-ASCII characters. Generally, Chinese characters are within this range.

Therefore, characters whose encoding is not 0-255 can be matched using the regular expression /[^\x00-\xff]/g. At this time, an idea is provided. If it is not a character in the ASCII code, then it will occupy two bytes by default.

We modify the page structure and output some test information:

<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>

Supplement the required calculated attributes:

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

At this time, we enter the content and the following effect appears:

At this time, you will find that it has been implemented. The ASCII code range occupies 1 digit, and the ASCII code outside the range occupies 2 digits.

Control the displayed content

Content display is implemented using calculated properties:

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

// 控制显示的内容
computedTxt() {
 return this.methodGetByteLen(this.txt, 10)
}

The following is addedmethodGetByteLenMethod:

/**
 * 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) + '...'
  }
 }
}

The final display does not exceed the maximum specified length

Exceeds the maximum specified length (Chinese character input)

Exceeds the maximum specified length (numeric input)

Exceeds the maximum specified length (combination of Chinese characters and letters)

Complete code

Finally, paste the final code:

 
 
 
 
 


 

  
  

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

 

I believe you have mastered the method after reading the case in this article, For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement a custom multi-selection event for WeChat applet

How to create-react- The app is modified to support multiple pages

The above is the detailed content of How to use Vue to control the number of characters and bytes displayed. For more information, please follow other related articles on the PHP Chinese website!