如何在 Vue.js 中使用过滤器反转字符串？

Vue 是一个用于构建用户界面的渐进式框架。核心库仅专注于视图层，易于获取并与其他库集成。 Vue 还可以完美地结合现代工具和支持库来支持复杂的单页应用程序。

过滤器是 Vue 组件提供的一项功能，可让您将格式设置和转换应用于模板动态数据的任何部分。组件的过滤器属性是一个对象。单个过滤器是一个接受一个值并返回另一个值的函数。返回的值是实际打印在 Vue.js 模板中的值。要使用过滤器反转字符串，我们必须编写逻辑来反转字符串并将过滤器应用于所需的字符串。

方法 1：在这种方法中，我们将使用 JavaScript 内置方法 split()、reverse() 和 join()。 split() 方法用于拆分每个字符并转换为一组字符数组。 reverse() 方法将数组字符作为一个整体进行反转，最后 join 方法将字符数组转换为普通字符串。

应用程序.js

const parent = new Vue({
    el: '#parent',
    data: {
        st1: 'GeekforGeeks is a computer science portal',
        st2: 'I am a GeekforGeeks Learner',
    },
  
    filters: {
        reverse: function(data) {
            const reverse =
                data.split("").reverse().join("");
            return reverse;
        }
    }
})

方法2：该方法不使用任何内置JavaScript方法，而是使用反转字符串的基本编程逻辑从头开始反转字符串。有两个名为i和j的指针每次交换它们的位置字符，直到字符串作为一个整体反转。

索引.html

  

    
    

  

    
        Original String:
            {{st1}}
        
  
        Reverse String :
            {{ st1 | reverse }}
        
        
  
        Original String:
            {{st2}}
        
  
        Reverse String :
            {{ st2 | reverse }}
        
    
      
    

  

应用程序.js

const parent = new Vue({
    el : '#parent',
    data : {
        st1 : 'GeekforGeeks is a computer science portal',
        st2 : 'I am a GeekforGeeks Learner',
    },
  
    filters:{
        reverse : function(data){
            var rev = [];
            for (let i = data.length - 1, 
                j = 0; i >= 0; i--, j++)
                rev[j] = data[i];
            revStr = rev.join('');
            return revStr;
        }
    }
})

输出：