使用 Vue.js 过滤器查找给定字符串中特定单词的第一次出现

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

可以通过对所需字符串应用过滤器来找出特定单词的第一次出现。我们将使用 JavaScript indexOf()方法来检查单词第一次出现的索引。如果单词完全匹配，则返回相应的索引，如果未找到单词，则返回“-1”作为索引。

例子：

index.html

  
  


  
    GeeksforGeeks
  
  
    {{st1}}: 
        Index: {{ st1 | find('portal') }}
      
  
    {{st2}}: 
        Index: {{ st2 | find('programming') }}
      
  
    {{st3}}: 
        Index: {{ st3 | find('React') }}
      
  
  

应用程序.js

const parent = new Vue({
  el: "#parent",
  data: {
    st1: "GeekforGeeks is a computer science portal",
    st2: "C++ is a best language for competative programming",
    st3: "Javascript is best for scripting",
  },
  
  filters: {
    find: function (st, target) {
      const idx = st.indexOf(target);
      return idx;
    },
  },
});

输出：