Vue JS - 组件中的反应性内容

Question

我正在尝试根据属性是真还是假来显示组件的数据，以保持一切反应。为此，我首先创建了一个对象数组“premiumContent”，每个对象代表我想在组件中显示的内容类型。无论 'premiumActivated' 是否为真，这些对象之一都应该是可见的。有人可以引导我完成解决方案来实现这一目标吗？我对此很陌生，所以在语法方面我倾向于混淆。

我的组件：

<template>
  <div>
    <div class="background-div">
      <div class="page-info-inner">
          <PremiumContent v-for="item in premiumContent"
                          :key="item.infoText" 
                          :info-text="item.infoText" 
                          :button-text="item.buttonText"
                          :button-callback="null"
                          :subscription-text="item.subscriptionText"
                          :is-visible="item.isVisible" />
      </div>
    </div>
  </div>
</template>

<script>
  import PremiumContent from '../../../components/partials/settings/Premium';
  
  export default {
    name: 'MyComponent',
    components: {PremiumContent},
    data: () => ({
      premiumActivated: false,
      
      premiumContent: [
        {
          infoText: "this is the content that should appear if premiumActivated is false",
          buttonText: "button text",
          // isVisible: 'if premium activated === false > show this object'
        },
        {
          infoText: "this is the content that should appear if premiumActivated is true",
          buttonText: "button text",
          subscriptionText: 'extra text',
          // isVisible: 'if premium activated === true > show this object'
        },
      ]
    }),

Answer 1

将v-show 或v-if 与item.isVisible 一起使用。

v-show 将渲染元素但将其隐藏，并且 v-if 在 isVisible 为真之前不会渲染它。