[英]How do you conditional bind v-model in Vue?
在 JavaScript 中,对象可以像这样可选地传播值:
const payload = {
name: "Joseph",
...(isMember && { credential: true })
};
在 React 中,JSX 可以像这样可选地传递道具:
<Child {...(editable && { editable: editableOpts })} />
现在在 Vue 中,我如何实现可选的v-model
?
我有一个这样的 textarea
<template>
<textarea v-model="textValue"> <!-- How can I optional bind v-model? -->
</template>
如何实现可选的绑定v-model
?
我想这样做是因为我想在发生错误时在该文本区域上显示警告。
发生错误时, textarea 显示警告并清除输入( v-model
)
正确的方法是使用计算变量的get和set属性
<template>
<textarea v-model="compVal" />
</template>
<script>
export default {
data () {
return {
valueTrue: 'hello',
valueFalse: 'bye',
selected: false
}
},
computed: {
compVal: {
get () {
if (this.selected) {
return this.valueTrue
} else {
return this.valueFalse
}
},
set (val) {
if (this.selected) {
this.valueTrue = val
} else {
this.valueFalse = val
}
}
}
}
}
</script>
我认为这样的事情会对你有用
<template>
<textarea v-if="hasError" :value="textValue">
<textarea v-else v-model="textValue">
</template>
您需要使用v-if
检查第一个条件,如果匹配,则像这样绑定模型
<template>
<textarea v-if="something" :value="textValue">
<textarea v-else v-model="textValue"> <!-- bind v-model here -->
</template>
或者你可以像这样使用三元运算符
<textarea v-model="textValue == 'test' ? 'ifTrue' : 'ifFalse'">
有关更多信息,请参阅此链接
你没试过三元运算符吗?
<template>
<textarea v-model="someValue == 'test' ? 'value1' : 'value2'">
</template>
并在数据中:
data(){
return {
someValue: "test",
value1: "i am value 1",
value2: "i am value 2"
}
}
或者你可以用这样的计算属性来做到这一点:
<template>
<textarea v-model="myModel">
</template>
computed: {
myModel(){
if(this.someValue == "test"){
return "value1";
}else{
return "value2";
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.