vue.js がクリックして変更するコンテンツを実装する方法-Vue.js-php.cn

ホームページ

ウェブフロントエンド

Vue.js

vue.js がクリックして変更するコンテンツを実装する方法

王林

Oct 12, 2021 pm 05:24 PM

vue.js コンテンツ

vue.js は、クリックしてコンテンツを変更するメソッドを実装します: [new Vue({el:"#example",data:{flag:true,btnText:'yuan/ton',},methods:{ showToggle :function(){this.flag ...].

vue.js がクリックして変更するコンテンツを実装する方法

この記事の動作環境: Windows10 システム、vue.js 2.9、thinkpad t480 コンピューター.

表示内容を変更し、異なる単位を切り替えるには、切り替えボタンをクリックする必要があります。

次のコードでは、 flag がスイッチに相当し、異なる単位を切り替えることができます。スイッチの変更を制御します。同じことは、コンテンツを切り替える他のインスタンスにも当てはまり、ボタンをクリックして表示、非表示などを設定することもできます。

詳細な実装コード:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>vue点击切换改变内容</title>  
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>  
</head>  
<body>  
    <Col span="2" style="text-align: center;">
       <p style=&#39;margin-top:8px;font-size:12px;&#39; v-text="btnText" v-show=&#39;flag==true&#39;></p>
       <p style=&#39;margin-top:8px;font-size:12px;&#39; v-text="btnText" v-show=&#39;flag==false&#39;></p>
    </Col>
    <Col span=&#39;2&#39;>
       <span @click=&#39;switchChange&#39;>
       <Icon type="arrow-swap" class=&#39;contractadd_icon&#39;></Icon>      
       </span>
    </Col>
    <script type="text/javascript">  
    new Vue({  
        el:"#example",  
        data:{  
           flag:true,//单位切换开关
           btnText:&#39;元/吨&#39;,
        },  
        methods:{  
            showToggle:function(){  
                this.flag = !this.flag  
                if(this.flag==true){  
                    this.btnText = "元/吨"  
                }else if(this.flag==false){  
                    this.btnText = "元/方"  
                } 
            }  
        }  
    })  
    </script>  
</body>  
</html>

ログイン後にコピー

推奨学習: phpトレーニング

以上がvue.js がクリックして変更するコンテンツを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7470

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

iPhone で機密コンテンツの警告を有効にし、その機能について学ぶ方法 Sep 22, 2023 pm 12:41 PM

特に過去 10 年間で、モバイルデバイスは友人や家族とコンテンツを共有する主な手段となりました。アクセスしやすく使いやすいインターフェイスと、画像やビデオをリアルタイムでキャプチャできる機能により、コンテンツの作成と共有に最適です。ただし、悪意のあるユーザーがこれらのツールを悪用して、閲覧に適しておらず、ユーザーの同意を必要としない不要な機密コンテンツを転送することは簡単です。これを防ぐために、iOS17では「センシティブコンテンツ警告」という新機能が導入されました。それとiPhoneでの使用方法を見てみましょう。新しい機密コンテンツに関する警告とは何ですか?またその仕組みは何ですか?前述したように、機密コンテンツの警告は、ユーザーが iPhone などの機密コンテンツを閲覧できないように設計された新しいプライバシーおよびセキュリティ機能です。

Microsoft Edge ブラウザーを 360 ナビゲーションで開くように変更する方法 - 360 ナビゲーションで開くように変更する方法 Mar 04, 2024 pm 01:50 PM

Microsoft Edge ブラウザーを開くページを 360 ナビゲーションに変更するにはどうすればよいですか? それは実際には非常に簡単なので、ここで Microsoft Edge ブラウザーを開くページを 360 ナビゲーションに変更する方法を共有します。見てください。皆さんのお役に立てれば幸いです。 Microsoft Edgeブラウザを開きます。以下のようなページが表示されます。右上隅にある三点アイコンをクリックします。「設定」をクリックします。設定ページの左欄にある「起動時」をクリックします。右の列の図に示されている 3 つの点をクリックし ([新しいタブを開く] をクリックしないでください)、[編集] をクリックして URL を「0」(またはその他の意味のない数字) に変更します。次に、「保存」をクリックします。次に「」を選択します。

Ace コードエディターを Vue プロジェクトに統合する方法の詳細な図による説明 Apr 24, 2023 am 10:52 AM

Ace は、JavaScript で書かれた埋め込み可能なコードエディターです。 Sublime、Vim、TextMate などのネイティブエディターの機能とパフォーマンスに匹敵します。あらゆる Web ページや JavaScript アプリケーションに簡単に埋め込むことができます。 Ace は Cloud9 IDE のメインエディタとして維持されており、Mozilla Skywriter (Bespin) プロジェクトの後継です。

Vue3 で単体テストを作成する方法を調べる Apr 25, 2023 pm 07:41 PM

Vue.js は、今日のフロントエンド開発において非常に人気のあるフレームワークとなっています。 Vue.js が進化し続けるにつれて、単体テストの重要性がますます高まっています。今日は、Vue.js 3 で単体テストを作成する方法を検討し、いくつかのベストプラクティスと一般的な問題と解決策を提供します。

JSX 構文と Vue のテンプレート構文の簡単な比較 (利点と欠点の分析) Mar 23, 2023 pm 07:53 PM

Vue.js では、開発者は、JSX 構文とテンプレート構文という 2 つの異なる構文を使用してユーザーインターフェイスを作成できます。どちらの構文にもそれぞれ長所と短所があるので、それらの違い、長所と短所について説明します。

vue がファイルスライスアップロードを実装する方法の簡単な分析 Mar 24, 2023 pm 07:40 PM

実際の開発プロジェクトのプロセスでは、比較的大きなファイルをアップロードする必要がある場合がありますが、その場合はアップロードが比較的遅くなり、バックグラウンドでフロントエンドがファイルのスライスをアップロードする必要がある場合があります。これは非常に簡単です。たとえば、1Aギガバイトのファイルストリームはいくつかの小さなファイルストリームに分割され、インターフェイスはそれぞれの小さなファイルストリームを配信するように要求されます。

Vue2実装APIの原理を解析する Jan 13, 2023 am 08:30 AM

Vue3 のリリース以来、単語合成 API は Vue を書く学生の視野に入ってきました。合成 API が以前のオプション API よりもどれほど優れているかは誰もが聞いたことがあると思います。そして、@ のリリースにより、 vue/composition-api プラグイン、Vue2 学生もバスに乗れます. 次に、主に Response ref と Reactive を使用して、このプラグインがどのようにこれを実現しているかを詳細に分析します。