vue toggle をクリックするとクラスが切り替わります (例による説明)

ここで、vue toggle を使用してワンクリックでクラスを切り替える例を共有します。非常に良い基準値を持っています。お役に立てれば幸いです。

例は次のとおりです:

<template>
  <p>
    <span :class="{&#39;bg-primary text-danger&#39;:isA,&#39;bg-success text-white&#39;:!isA}" @click="toggle()">AAAAA</span>
  </p>
</template>
<script>
  export default {
    name: &#39;hello&#39;,
    data () {
      return {
        isA: false
      }
    },
    methods:{
      toggle:function () {
        this.isA=!this.isA
      }
    }
  }
</script>
<style scoped>
  @import "../../../src/assets/plugin/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.css";
</style>

上記は、将来皆さんに役立つようにまとめたものです。

関連記事:

vue ページの各レンダリング後に div のスクロールバーを下部に維持する方法

Vue は最初にデータをリクエストしてから dom 共有をレンダリングする実装

vue の解決策ページ DOM 操作問題が機能しない

以上がvue toggle をクリックするとクラスが切り替わります (例による説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。