vue 字符串包含

// 在 Vue 中检查字符串是否包含某个子字符串，可以使用 JavaScript 的 String.includes() 方法。
// 下面是一个简单的示例，展示如何在 Vue 组件中实现这一功能。

<template>
  <div>
    <p>输入的字符串: {{ inputString }}</p>
    <p>要查找的子字符串: {{ searchString }}</p>
    <p v-if="isIncluded">字符串包含该子字符串。</p>
    <p v-else>字符串不包含该子字符串。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputString: 'Hello, Vue!',
      searchString: 'Vue'
    };
  },
  computed: {
    isIncluded() {
      // 使用 includes 方法检查 inputString 是否包含 searchString
      return this.inputString.includes(this.searchString);
    }
  }
};
</script>

解释说明：

1. 模板部分 (<template>):

   • 显示 inputString 和 searchString。
   • 使用 v-if 和 v-else 来根据 isIncluded 的值显示不同的消息。

2. 脚本部分 (<script>):

   • data 函数返回两个字符串：inputString 和 searchString。
   • computed 属性 isIncluded 使用 includes() 方法检查 inputString 是否包含 searchString，并返回布尔值。

通过这种方式，你可以轻松地在 Vue 组件中实现字符串包含检查的功能。