vue判断字符串包含字符

// 在 Vue 中判断字符串是否包含特定字符，可以使用 JavaScript 的原生方法 `includes()` 或者正则表达式。

<template>
  <div>
    <p v-if="containsCharacter">字符串包含指定字符</p>
    <p v-else>字符串不包含指定字符</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: 'Hello, Vue!',
      targetChar: 'Vue',
      containsCharacter: false
    };
  },
  created() {
    // 使用 includes 方法判断字符串是否包含目标字符
    this.containsCharacter = this.str.includes(this.targetChar);

    // 如果需要使用正则表达式，可以这样做：
    // const regex = new RegExp(this.targetChar);
    // this.containsCharacter = regex.test(this.str);
  }
};
</script>

解释说明：

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

   • 使用了 v-if 和 v-else 指令来根据 containsCharacter 的值显示不同的文本内容。

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

   • data 函数返回了一个对象，其中包含了要检查的字符串 str 和目标字符 targetChar，以及一个布尔值 containsCharacter 来存储判断结果。
   • 在 created 生命周期钩子中，使用了 includes() 方法来判断 str 是否包含 targetChar，并将结果赋值给 containsCharacter。
   • 还展示了如何使用正则表达式来进行同样的判断（注释部分）。