vue3 字符包含

在 Vue 3 中，处理字符串包含的情况通常涉及到模板中的表达式或者计算属性（computed properties）。这里我将提供几种方法来处理字符串包含的场景。

1. 使用模板中的表达式

在 Vue 的模板中，你可以直接使用 JavaScript 的 includes 方法来检查一个字符串是否包含另一个字符串。

<template>
  <div>
    <p v-if="myString.includes('target')">字符串包含 'target'</p>
    <p v-else>字符串不包含 'target'</p>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const myString = ref('这是一个测试字符串');
</script>

2. 使用计算属性

如果你需要在多个地方使用相同的逻辑，或者需要在包含关系的基础上执行更复杂的操作，使用计算属性是一个更好的选择。

<template>
  <div>
    <p v-if="containsTarget">字符串包含 'target'</p>
    <p v-else>字符串不包含 'target'</p>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue';
 
const myString = ref('这是一个测试字符串');
const containsTarget = computed(() => myString.value.includes('target'));
</script>

3. 使用方法

在某些情况下，你可能想在事件处理函数中检查字符串包含关系。这时，你可以定义一个方法来处理这个逻辑。

<template>
  <div>
    <button @click="checkContains">检查包含关系</button>
    <p v-if="containsTarget">字符串包含 'target'</p>
    <p v-else>字符串不包含 'target'</p>
  </div>
</template>
 
<script setup>
import { ref, reactive } from 'vue';
 
const myString = ref('这是一个测试字符串');
const state = reactive({ containsTarget: false });
 
function checkContains() {
  state.containsTarget = myString.value.includes('target');
}
</script>

4. 使用过滤器（不推荐在 Vue 3 中使用）

Vue 3 不再推荐使用过滤器（filters），因为它们已经在 Vue 3 中被废弃。但在 Vue 2 中，你可以使用过滤器来实现这样的功能。但在 Vue 3 中，你应该使用方法或计算属性来替代。

在 Vue 3 中，最推荐的方法是使用计算属性或者模板中的表达式来处理字符串包含的逻辑。这样可以更好地利用 Vue 的响应式系统，使得你的应用更加高效和响应迅速。如果你需要在方法中处理，定义一个方法来执行这个逻辑是一个清晰的选择。