如何使用 Vue.js 过滤器替换所有出现的字符串？

在本文中，我们将学习如何使用 VueJS 中的过滤器将所有出现的特定单词替换为其他单词。 Vue 是一个用于构建用户界面的渐进式框架。过滤器是 Vue 组件提供的一项功能，可让您将格式设置和转换应用于模板动态数据的任何部分。组件的过滤器属性是一个对象。单个过滤器是一个接受一个值并返回另一个值的函数。返回的值是实际打印在 Vue.js 模板中的值。

可以通过对所需字符串应用过滤器来将给定字符串中出现的特定单词替换为其他单词。我们将使用 JavaScript split()方法在必须替换的目标单词或字符上拆分字符串。这将返回一个数组，其中包含字符串中的所有单词，除了用于拆分字符串的单词或字符。然后，我们将使用join()方法重新连接数组。此方法接受一个参数，该参数表示在加入数组时将使用的字符串。这将使添加所需的替换词成为可能。我们最终将返回结果字符串。

例子：

index.html

  
  


  
    
      Original String: 
      {{st1}}
    
      After Replacing words: 
      {{ st1 | replace('cse','computer science') }}
    
    
  
    
      Original String: {{st2}}
    
      After Replacing characters: 
      {{ st2 | replace('!','.') }}
    
    
  
  
  

应用程序.js

const parent = new Vue({
  el: '#parent',
  data: {
    st1: `GfG is a CSE portal.\
          CSE is the study of algorithmic
          processes, CSE is a particular\
          stream of a Engineering also`,
  
    st2: '172!198!108!202',
  },
  
  filters: {
    replace: function (st, rep, repWith) {
      const result = st.split(rep).join(repWith)
      return result;
    }
  }
})

输出：