vue.jsコンポーネントテンプレート内の小道具が存在するかどうか確認してください

Question

多くのバリエーションを試した後、<template></template>セクション内のコンポーネントのスロットまたは部分コードを正しくスタイルする方法がわかりません。私はそれのための特別なHTMLマークアップを示すだろうセクション<template></template>でCounter.vueにおけるよう

親レベルから小道具<counter :recent="true"></counter>が存在するかどうかを確認する方法は、ありますか？

=== recentはそれがで設定されますparentから渡された場合recentのデフォルト値はfalse可能となります。===ここ

Vue.component('counter', { 
 
\t template: ` 
 
<span class="counter" :number="21" v-text="number"> 
 
\t <span v-if="recent"> 
 
    \t since VARTIME 
 
    </span> 
 
</span> 
 
    `, 
 
    data: function(){ 
 
    \t return{ 
 
    \t count: this.number + 1 
 
    } 
 
    }, 
 
    props: { 
 
    \t number: Number, 
 
    recent: { 
 
    \t type: Boolean, 
 
     default: false 
 
    } 
 
    }, 
 
    computed: { 
 
    \t 
 
    }, 
 
    created(){ 
 
    \t if(this.recent === true){ 
 
    \t console.log('mounted recent true'); 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
\t el: "#app", 
 
    
 
    data: { 
 
    \t count: '' 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 
<div id="app"> 
 

 
    <counter :number="20" :recent="true"></counter> 
 
    
 
</div>

Answer 1

を更新しました子供。

ここで説明したように詳細な小道具の定義を使用してください。 https://vuejs.org/v2/guide/components.html#Prop-Validation

それはスパンの内部内容を上書きしますので、V-かの意志が実行されることはありませんようv-text="number"を削除します。

これは、CSS/SASS /スタイラス/以下からあなたが最終的なスタイルというあなたは、結合条件クラスを追加する必要があります作業例

Vue.component('counter', { 
    template: ` 
<span class="counter" :number="21"> 
    <span v-if="recent"> 
    since VARTIME 
    </span> 
</span> 
    `, 
    data: function(){ 
    return{ 
     count: this.number + 1  
    } 
    }, 
    props: { 
    number: Number, 
    recent: { 
     type: Boolean, 
     default: false 
    } 
    }, 
    computed: { 

    }, 
    created(){ 
    if(this.recent === true){ 
     console.log('mounted recent true'); 
    } 
    } 
}); 

new Vue({ 
    el: "#app", 

    data: { 
    count: '' 
    } 
}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
<div id="app"> 

    <counter :number="20" :recent="true"></counter> 

</div> 

Answer 2

です。次のように

これは行うことができますされます自動的にcombine multiple class declarations on the same element without problems, as described in the manualをvuejs

<template> 
    <span class="counter" v-text="count" :class="{ cssClassName: recent}"> 
     <slot></slot> 
     <span v-if="recent"> 
      since VAR_DATETIME <i class="fa fa-refresh" @click="updateList"></i> 
     </span> 
    </span> 
</template> 

注意してください。