Vue项目开发需求：在RealWord App中屏蔽含"test"短语的内容

Hey there! To hide any tags that include the phrase "test" in your TagList component, we can use Vue's reactive features to cleanly filter the tags before rendering. Here's how to do it step by step:

1. Using a Computed Property (Recommended) #

This is the cleanest, most maintainable approach because it encapsulates the filtering logic and leverages Vue's reactivity to automatically update when the tags prop changes.

Modify your TagList component like this:

<template>
  <ul class="tag-list">
    <!-- Use our filtered computed property instead of the raw tags prop -->
    <li class="tag-default tag-pill tag-outline" v-for="(tag, index) of filteredTags" :key="index">
      <span v-text="tag" />
    </li>
  </ul>
</template>

<script>
export default {
  name: "TagList",
  props: {
    tags: Array
  },
  computed: {
    filteredTags() {
      // Filter out any tag that contains the exact string "test"
      return this.tags.filter(tag => !tag.includes('test'));
      
      // If you need case-insensitive filtering (e.g., hide "Test", "TEST" too), use this line instead:
      // return this.tags.filter(tag => !tag.toLowerCase().includes('test'));
    }
  }
};
</script>

How this works: #

• The filteredTags computed property takes the original tags array and removes any tag that includes "test".
• Whenever the parent component updates the tags prop, filteredTags automatically refreshes to reflect the changes.
• The template only renders the filtered tags, so no unwanted content shows up.

2. Template-Only Filter (Quick Alternative) #

If you want a quick fix without adding a computed property, you can filter directly in the v-for directive. Note that this is less scalable if you need to add more filtering rules later:

<template>
  <ul class="tag-list">
    <li 
      class="tag-default tag-pill tag-outline" 
      v-for="(tag, index) of tags.filter(t => !t.includes('test'))" 
      :key="index"
    >
      <span v-text="tag" />
    </li>
  </ul>
</template>

<script>
export default {
  name: "TagList",
  props: {
    tags: Array
  }
};
</script>

Either approach will ensure no tags containing the phrase "test" are displayed in your component.

内容的提问来源于stack exchange，提问作者wafa.A