vue コンポーネントの使用例

この記事は主に vue コンポーネントの使用方法を例とともに紹介していますが、編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

プロジェクト開発では、いくつかの公開モジュールをコンポーネントにカプセル化する必要があります。

たとえば、下の図:

このスタイルを見ると、次の 3 つのデータはバックグラウンドからフロントエンドに返される配列であるに違いないと確信し、それらを走査することができます。

• 最初の方法: ページ上で配列を直接走査し、3 つのデータを表示します。

• 2 番目の方法: コンポーネントを 1 つのデータでカプセル化し、ページ上でこのコンポーネントを走査します。

実際の開発では 2 番目の方法を使用します。最初の方法が非常に単純であるのに、なぜ 2 番目の方法を使用するのかを尋ねる人はいないでしょう。

理由:

モジュールが複数の場所に表示され、モジュールが独自のページにのみ記述されており、他の場所でも必要な場合は、モジュールを書き直す必要があり、時間と労力がかかります。 。组 そこで、最初にコンポーネントを設定します。上記は例です:

ファイル名: todayhou.vue

rreee

ホームページ: home.Vue

<template>
    <p class="today-body">
        <p class="today-list clearfix">
            <p class="badge-box fl">
                <span class="today-badge green" v-if="option.tradeDesc==&#39;出售&#39; || option.tradeDesc==&#39;租购&#39;">售</span>
                <span class="today-badge red"   v-if="option.tradeDesc==&#39;租售&#39; || option.tradeDesc==&#39;租购&#39; ">租</span>
                <span class="today-badge white"  v-if="option.typeDesc">私</span>
                <span class="today-badge white" v-if="option.levelDesc">{{option.levelDesc}}</span>
                <p class="today-time">{{option.followTime}}</p>
            </p>
            <p class="info-box fl">
                <p class="info-name"><span>{{option.communityName}}</span><span>·{{option.roomNum }}室</span><span>{{option.hallNum }}厅</span><span>{{option.toiletNum }}卫</span><span>{{option.area }}·㎡</span></p>
            </p>
            <p class="price-box fr">
                <p class="info-price">{{option.salePrice}}
                    <span>万</span>
                </p>
                <p class="info-rent">{{option.rentPrice}}
                    <span>元/月</span>
                </p>
            </p>
        </p>
    </p></template><script>export default {
    name: "todayHou",
    props: [&#39;option&#39;],   <!-- 传入的每一项的值  -->
    data() {
        return {

        };
    }
};</script><style lang="less"></style>

関連する推奨事項:

Vue.jsコンポーネントを作成して使用する

vue コンポーネントの紹介

Vue でコンポーネントを作成する 2 つの方法

以上がvue コンポーネントの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。