如何使用手写笔自定义 VueJS 2.0 的样式? [英] How to customize style of VueJS 2.0 using stylus?
本文介绍了如何使用手写笔自定义 VueJS 2.0 的样式?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是没有 vuetify.min.css 的 v-text-field，只使用手写笔.
这是我的代码.
<v-text-field type="text" name="password"></v-text-field></模板><style lang="stylus" scoped="scoped">.input-group_details {XXX}</风格>我试图在 v-text-field 中隐藏一些 div.
但我什么都没变.
解决方案
使用作用域样式是不可能的(这就是作用域的重点)
您可以做的是传递一个 prop 表示隐藏的 div 或全局处理它.
传递道具:
const textField = {模板:`<div><div>始终显示</div><div v-if="显示">有条件地显示`，道具:{显示:布尔}};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="应用程序"><b>显示 = 真:</b><v-text-field :shown="true"></v-text-field><br><b>显示 = 假:</b><v-text-field :shown="false"></v-text-field>I am using v-text-field without vuetify.min.css just use stylus.
Here is my code.
<template>
<v-text-field type="text" name="password"></v-text-field>
</template>
<style lang="stylus" scoped="scoped">
.input-group_details {
XXX
}
</style>
I am trying to hide some divs in v-text-field.
But I got nothing changed.
解决方案
That is not possible using scoped styles (That's the point of scoping)
What you could do is either passing down a prop which indicates that the divs are hidden or handle it globally.
passing down a prop:
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>
这篇关于如何使用手写笔自定义 VueJS 2.0 的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
