textfield中的vue检查值
textfield中的vue检查值
提问于 2020-03-22 04:02:27
我想检查输入中的值，如果输入中有任何值，我想使用VUE将类sh-is active添加到div中，但是我不知道如何.请帮帮我
<template>
<div class="sh-wrap sh-wrap-input sh-is-active">
<label class="sh-label">First and Last Name</label>
<input type="text" class="sh-form-control sh-input" placeholder="First and Last Name" />
<span for="email" class="error">Required</span>
</div>
</template>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-22 04:15:08
您可以使用v-model绑定一个值到输入，并动态地添加类:class="{ 'sh-is-active': name }"。阅读关于如何绑定类和样式的官方文件
new Vue({
el: '#example',
data() {
return {
name: null
}
}
}).sh-wrap-input {
padding: 1rem;
border: 1px solid gray;
}
.sh-is-active {
background: yellow;
}
.sh-label {
display: block;
margin-bottom: .125rem;
}
.error {
display: block;
color: red;
font-size: 12px;
margin-top: .125rem;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="example" class="sh-wrap sh-wrap-input" :class="{ 'sh-is-active': name }">
<label class="sh-label">First and Last Name</label>
<input v-model="name" type="text" class="sh-form-control sh-input" placeholder="First and Last Name" />
<span v-if="!name" for="email" class="error">Required</span>
</div>
Stack Overflow用户
发布于 2020-03-22 04:07:48
若要检查值是否存在，可以添加:value="inputValue"并使用
watch: {inputValue: function(value){
"add your class here"
}}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60799068
复制相关文章
相似问题
vue - textfield界值不反映实际值
如何检查Wicket Textfield中的空值？
错误检查int值的空textField
空-检查手动转换的TextField值
检查Html输入textfield是否有值
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
