在 Vue.js 中使用过滤器截断字符串

在本文中，我们将学习如何在 VueJS 中使用过滤器截断字符串。过滤器是 Vue 组件提供的一项功能，可让您将格式设置和转换应用于模板动态数据的任何部分。组件的过滤器属性是一个对象。单个过滤器是一个接受一个值并返回另一个值的函数。返回的值是实际打印在 Vue.js 模板中的值。

可以通过对所需字符串应用过滤器来执行字符串提取。编写过滤器函数的逻辑有两种方法：

方法 1：在这种方法中，我们使用 JavaScript 内置方法split、slice和join 。 split方法用于拆分每个字符并将它们转换为一组字符数组。 slice方法提取字符串的所需部分并将其返回。 join方法用于将字符数组转换为普通字符串。我们将一起使用所有三种方法来截断字符串。 substr方法也可用于返回截断的字符串。

例子：

index.html

    
    


    
        
          Original String: 
            {{st1}}
        
  
        
          Truncated String : 
            {{ st1 | truncate(13) }}
        
  
    
    

---

应用程序.js

const parent = new Vue({
    el: '#parent',
    data: {
        st1: 'GeekforGeeks is a computer science portal'
    },
  
    filters: {
        truncate: function(data,num){
            const reqdString = 
              data.split("").slice(0, num).join("");
            return reqdString;
        }
    }
})

输出：

方法 2：此方法不使用任何内置的 JavaScript 方法。截断是通过将字符串的字符循环所需的次数来完成的，并通过将它们附加到将返回的最终字符串来保持所需的字符数。

索引.html

    
    


    
        
          Original String: 
            {{st1}}
        
        Truncated String : 
            {{ st1 | truncate(18) }}
        
    
    

应用程序.js

const parent = new Vue({
    el: '#parent',
    data: {
        st1: 'GeekforGeeks is a computer science portal'
    },
  
    filters: {
        truncate: function(data, num) {
            reqdString = ''
            for(let i=0; i

输出：