Question

我使用v-text-field而不使用vuetify.min.css只需使用手写笔。

这是我的代码。

<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。

但我没有改变。

Answer 1

使用范围样式（这是范围界定点）

是不可能的

你可以做的是传递prop，表示div被隐藏或全局处理。

传递道具：

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>

Answer 2

根据https://vue-loader.vuejs.org/en/features/scoped-css.html#notes 你需要使用＆gt;＆gt;＆gt; CSS的运算符所以这应该工作：＆lt; style scoped＆gt; ＆GT;＆GT;＆GT; .input-group_details { //你的css } ＆LT; /风格＆GT; 你可以使用lang =＆＃34; stylus＆＃34;它会工作，但你的IDE可能会抛出一些语法错误。我不确定该手写笔的正确语法是什么。请注意，它是在v12.2.0中实现的

如何使用手写笔自定义VueJS 2.0的风格？

2 个答案: