您如何在Vue中条件绑定v模型？

Question

在JavaScript中，对象可以这样选择传播值：

const payload = {
  name: "Joseph",
  ...(isMember && { credential: true })
};

在React中，JSX可以像这样通过可选的传递道具：

<Child {...(editable && { editable: editableOpts })} />

现在Vue中，如何实现可选的v-model？

我有这样的文本区域

<template>
  <textarea v-model="textValue"> <!-- How can I optional bind v-model? -->
</template>

如何实现可选绑定v-model？

我想这样做是因为我想在发生错误时在该文本区域上显示警告。

发生错误时，文本区域显示警告并清除输入（v-model）

Answer 1

我认为类似这样的方法可以为您解决问题

<template>
  <textarea v-if="hasError" :value="textValue">
  <textarea v-else v-model="textValue">
</template>

Answer 2

您是否尝试过三元运算符？

<template>
  <textarea v-model="someValue == 'test' ? 'value1' : 'value2'">
</template>

和输入数据：

data(){
   return {
      someValue: "test",
      value1: "i am value 1",
      value2: "i am value 2"
   }
}

Answer 3

您需要使用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'">