vueで隠しデータを表示する方法

Vue では、v-if、v-show、計算されたプロパティまたはメソッドを通じてデータを非表示または表示できます。以下では、これらのメソッドを詳しく見てみましょう。

1. v-if/v-else コントロールの表示

<template>
  <div>
    <div v-if="isShow">这是要显示的数据</div>
    <div v-else>这是要隐藏的数据</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

この例では、ブール型 data isShow を使用して、データを表示するか非表示にするかを制御します。 isShow の値が true の場合は表示対象のデータが表示され、それ以外の場合は非表示になります。

2. v-show コントロールの表示

<template>
  <div>
    <div v-show="isShow">这是要显示的数据</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

v-if/v-else とは異なり、v-show は CSS 表示プロパティを制御することによってデータを表示および非表示にします。 isShow の値が true の場合、表示対象のデータが表示され、表示属性はデフォルトでブロックなどの要素に設定された値になります。それ以外の場合は非表示となり、表示属性は none になります。

v-if/v-else と v-show は使用シナリオが異なりますが、v-if/v-else は条件が満たされた場合にのみ動作するため、頻繁に切り替える必要がある場合の使用に適しています。対応するコンテンツをレンダリングし、条件が満たされない場合は破棄して再レンダリングします。v-show は、単に CSS 表示プロパティを制御するだけなので、最初のレンダリングで条件に基づいてデータの表示または非表示を制御する必要がある場合の使用に適しています。 。

3. 計算された計算プロパティ

<template>
  <div>
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      content: '这是要显示的数据'
    }
  },
  computed: {
    message() {
      if(this.isShow) {
        return this.content
      } else {
        return ''
      }
    }
  }
}
</script>

計算プロパティは、テンプレート内のいくつかの値を動的に計算し、レンダリングのために計算結果をテンプレートに返すことができます。上記の例では、computed computed プロパティの message メソッドを使用して、isShow 値の変更に基づいて表示されるデータを動的に変更します。

4.methods Method

<template>
  <div>
    <div>{{ getMessage() }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      content: '这是要显示的数据'
    }
  },
  methods: {
    getMessage() {
      if(this.isShow) {
        return this.content
      } else {
        return ''
      }
    }
  }
}
</script>

methods メソッドは、テンプレート内のメソッドを動的に呼び出し、レンダリングのためにメソッドの戻り値をテンプレートに返すことができます。上記の例では、methods メソッドの getMessage メソッドを使用して、isShow 値の変更に基づいて表示するデータを動的に変更しました。

どの方法を使用する場合でも、重要なのは、特定のシナリオに応じてデータを非表示または表示する適切な方法を選択することです。

以上がvueで隠しデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。