Vue3中 :question-title="item.questionTitle"中question与title之间不加“-”为什么会传不了值

在Vue3中，使用`v-bind`指令绑定属性时，属性名中不能包含特殊字符，如`-`。这是因为`-`在JavaScript中被解析为减号运算符，会导致属性名解析错误。

如果你想要绑定一个包含特殊字符的属性名，可以使用驼峰命名法或者使用方括号来绑定属性。

使用驼峰命名法：

<template>
  <div :questionTitle="item.questionTitle"></div>
</template>

使用方括号：

<template>
  <div :[question-title]="item.questionTitle"></div>
</template>

这样就能够正确地传递值到属性中了。

相关问题

Vue3中 :question-title="item.questionTitle"中question与title之间为什么要有-

在Vue3中，使用"-"来连接属性名称的不同部分是为了遵循HTML属性的命名规范。HTML属性名称中通常使用连字符（-）来分隔单词，以提高可读性和一致性。

在这个例子中，"question-title"是一个自定义属性，用于绑定到Vue组件的data属性中的一个值（item.questionTitle）。使用连字符来连接属性名称中的不同部分可以让属性更易读和理解，同时也符合HTML属性的命名规范。

Vue3中:question-title="item.questionTitle"进行传值，question-title为什么要加上-

在Vue3中，使用短横线（-）作为属性名称的分隔符是为了遵循HTML规范。根据HTML规范，属性名中不允许出现大写字母和特殊字符，只能使用小写字母、数字和短横线。因此，在Vue3中，如果想要使用自定义属性名，需要将其转换为小写，并使用短横线进行连接。这样做可以确保Vue3能够正确解析和渲染组件的属性。所以，在你的例子中，为了符合HTML规范，将属性名从"questionTitle"转换为"question-title"进行传值。