ホームページ > ウェブフロントエンド > jsチュートリアル > vue toggle をクリックするとクラスが切り替わります (例による説明)

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

亚连
リリース: 2018-05-30 15:27:55
オリジナル
3364 人が閲覧しました

ここで、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート