VueJS：带有冒号前缀的HTML属性表示什么？

Question

例子：

<vue-select 
  class="vue-select1" 
  name="select1"
  :options="options1" 
  :model.sync="result1"
></vue-select>

在这里，:options和:model.sync前面的冒号是什么意思？我在互联网上搜索了很多，但无法找到答案。 例子见此处: https://github.com/Haixing-Hu/vue-select

- user5477154

---

这使您可以使用变量、计算属性等（当然是从您的组件中）作为属性值，而不是静态值。 - sandrooco

Answer 1

在Vue模板中，HTML属性前面带有冒号:是代表使用v-bind的简写形式。 v-bind的完整文档请参阅此处。

- thanksd

---

我不熟悉其他使用这种语法的前端框架。React和Angular肯定不会。 - thanksd

在React中替换属性值周围的引号为花括号可以实现同样的效果，例如在Vue中你会写成:options="options1", 但在React中你需要写成options={options1}。 - Nathan Strutz

@NathanStrutz 更准确地说，是JSX等效的。 - Marcel Besixdouze

Answer 2

补充感谢thanksd的答案：

这些是动态属性。基本上意味着Vue.js会让你将这些属性的值设置为变量，并且当这些变量的值更新时，这些属性的值也会更新。

- Nathan Wailes

Answer 3

在使用冒号时要小心，因为在 HTML 中选择属性与在 CSS 和 JQuery 中选择属性具有不同的含义。在 CSS 和 JQuery 中，冒号表示一个“伪选择器”，这与 v-bind 不同；

- demogorgon