使用 CSS 在 Vuejs 中输入值 ：not[value= " " ]

Question

我在VueJS项目中使用Bootstrap-Vue，使用类是不可能的。

我有下一个输入

<div class="input__wrapper">
<b-form-input
v-model="idOrNameSelected"
class="textfield"
:class="{'input--empty': idOrNameSelected != null}"
@keydown.enter.native="onSubmit" />
<label
class="input__label">Service id or name</label>
</div>

在我的脚本部分中，我定义了idOrNameSelected，如下所示：

data () {
return {
idOrNameSelected: ''
}
}

在我的 scss 文件中，我有一个规则，例如

&:focus ~ .input__label,
&:not([value=""]) ~ .input__label {
top: 8px;
pointer-events: none;
}

当我在输入中输入任何文本时，从来没有使用此 css 规则，为什么?????

谢谢

Answer 1

这就是问题所在。CSS 逻辑不知道 Vue 观察者或v-model所以它不会更新你的思维方式。退后一步，尝试这个简单的例子：

.HTML

<input class="in" type="text" value="bar" />
<label class="lab">Test</label>

.CSS

.in:not([value="foo"]) ~ .lab {
color: crimson;
}

如您所见，标签现在是红色的。现在尝试更改value="foo"您将看到label切换颜色。但是，您应该注意的是，它在 CSS 本身上没有任何 2 向绑定，而实际上只是在实际 DOM 中获取当前值。

为了向您提供实际的解决方案，在这种情况下，我将使用类绑定。 您可以在此处阅读有关它们的信息：https://v2.vuejs.org/v2/guide/class-and-style.html

本质上，它允许您根据某些真实条件动态添加/删除类。你实际上可以在那里使用你的v模型。

以下是我如何做到这一点的示例：

<template>
<div id="app">
<input type="text" v-model="model">
<label :class="{error: model === ''}">Label</label>
</div>
</template>
<script>
export default {
name: "App",
data() {
return { model: "" };
}
};
</script>
<style scoped>
.error {
color: crimson;
}
</style>

Answer 2

@dev-cyprium 关于 Vue 在使用 v-model 时没有将属性value放在输入元素上是正确的(value实际上是元素上的 domProp(

不过，您可以使用数据属性执行一个技巧：

<template>
<div>
<b-form-input id="the-input" v-model="value" :data-value="value"></b-form-input>
<label for="the-input">Hello World</label>
</div>
</template>
<style>
input.form-control ~ label {
color: red;
}
input.form-control[data-value=""] ~ label {
color: blue;
}
</style>
<script>
export default {
data() {
return {
value: ''
}
}
}
</script>