如何在Vue.js中使用filter反转字符串

Vue是一个用于构建用户界面的渐进式框架。核心库仅关注视图层，并且容易学习和与其他库集成。Vue也完全能够与现代工具和支持库结合使用，为复杂的单页面应用提供支持。

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

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

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <script src= 
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> 
    </script> 
</head> 
  
<body> 
    <div id='parent'> 
        <p><strong>Original String: 
            </strong>{{st1}} 
        </p> 
  
        <p><strong>Reverse String : 
            </strong>{{ st1 | reverse }} 
        </p> 
        </br> 
  
        <p><strong>Original String: 
            </strong>{{st2}} 
        </p> 
  
        <p><strong>Reverse String : 
            </strong>{{ st2 | reverse }} 
        </p> 
    </div> 
      
    <script src='app.js'></script> 
</body> 
  
</html>

app.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 ，每次交换它们的位置字符，直到整个字符串被反转。

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <script src= 
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> 
    </script> 
</head> 
  
<body> 
    <div id='parent'> 
        <p><strong>Original String: 
            </strong>{{st1}} 
        </p> 
  
        <p><strong>Reverse String : 
            </strong>{{ st1 | reverse }} 
        </p> 
        </br> 
  
        <p><strong>Original String: 
            </strong>{{st2}} 
        </p> 
  
        <p><strong>Reverse String : 
            </strong>{{ st2 | reverse }} 
        </p> 
    </div> 
      
    <script src='app.js'></script> 
</body> 
  
</html>

app.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; 
        } 
    } 
})

输出：

如何在Vue.js中使用filter反转字符串