2017-06-28 9 views
0

vuetify.min.cssを使用せずにv-text-fieldを使用しています。単にスタイラスを使用します。スタイラスを使ってVueJS 2.0のスタイルをカスタマイズする方法は?

ここに私のコードです。

<template> 
    <v-text-field type="text" name="password"></v-text-field> 
</template> 
<style lang="stylus" scoped="scoped"> 
.input-group_details { 
    XXX 
} 
</style> 

私はv-text-fieldにいくつかのdivを隠そうとしています。

しかし、私は何も変わっていません。あなたは何ができるかスコープスタイルを使用できません

答えて

0

(それはスコープのポイントです)

はdivタグを非表示またはグローバルそれを処理していることを示しているのいずれかであるpropを伝承します。

小道具伝承:あなたはCSS

ため>>>演算子を使用する必要が https://vue-loader.vuejs.org/en/features/scoped-css.html#notesごとに

const textField = { 
 
    template: ` 
 
    <div> 
 
     <div>Always shown</div> 
 
     <div v-if="shown"> 
 
     Conditionally shown 
 
     </div> 
 
    </div> 
 
    `, 
 
    props: { shown: Boolean } 
 
}; 
 

 
Vue.component('v-text-field', textField); 
 

 
new Vue({}).$mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <b>shown = true:</b> 
 
    <v-text-field :shown="true"></v-text-field> 
 
    <br> 
 
    <b>shown = false:</b> 
 
    <v-text-field :shown="false"></v-text-field> 
 
</div>

+0

>だったことに注意してください。 私の答えをチェックしてください。 – Traxo

0

は、これは動作するはずです:

<style scoped> 
>>> .input-group_details { 
//your css 
} 
</style> 

lang="stylus"を使用すると動作しますが、IDEで構文エラーが発生することがあります。

スタイラスの正しい構文がわかりません。


それはスコープstyles`を使用不可能であることを ` implemented in v12.2.0

関連する問題