Vue中基于计算属性的textarea条件占位符正确语法咨询

嘿，我来帮你搞定这个动态占位符的问题～你之前的写法问题在于直接在HTML属性里嵌套了Vue模板插值{{}}，这不符合Vue的模板语法规范，咱们得用Vue的属性绑定来实现动态占位符。

正确的实现方式 #

Vue中要动态绑定HTML属性，需要用v-bind:（或者简写的:），然后在绑定的表达式里写条件逻辑就行，不需要再套{{}}。这里给你两种常用写法：

写法一：三元表达式（兼容性好，Vue2/Vue3都能用）

直接在:placeholder的绑定表达式里写三元判断，因为activity是计算属性，直接调用它的feedback属性就行：

<textarea v-model="feedback_text" :placeholder="activity.feedback ? activity.feedback : 'Leave some formative feedback'"></textarea>

如果担心activity本身可能为null/undefined导致报错，可以再加一层判断：

<textarea v-model="feedback_text" :placeholder="activity && activity.feedback ? activity.feedback : 'Leave some formative feedback'"></textarea>

写法二：空值合并运算符（Vue3推荐，更简洁）

如果是Vue3项目，原生支持ES6的空值合并运算符??，它只会在左侧值为null或undefined时才返回右侧默认值，比三元表达式更简洁：

<textarea v-model="feedback_text" :placeholder="activity.feedback ?? 'Leave some formative feedback'"></textarea>

要是activity也可能不存在，搭配可选链?.一起用更安全：

<textarea v-model="feedback_text" :placeholder="activity?.feedback ?? 'Leave some formative feedback'"></textarea>

（注：Vue2项目要使用??和?.的话，需要安装对应的Babel插件或Composition API）

为什么原来的写法不行？ #

Vue的模板插值{{}}只能用在文本内容里，不能直接写在HTML属性中。要动态修改属性值，必须用v-bind（或简写:）来绑定，这样Vue才能解析属性里的表达式逻辑。

内容的提问来源于stack exchange，提问作者jj008