此代码中cx和cy之前的冒号是什么意思？

Question

<circle
   r="3"
   :cx="airport.x"
   :cy="airport.y"
   class="airport__marker"
/>

与v-bind：cx和v-bind：cy相同吗？

Answer 1

此代码看起来像是来自Vue应用。特别是Vue模板。

[:cx="airport.x"是v-bind:cx="airport.x"]的快捷方式>

这是说要从代码中的变量cx获取属性airport.x的值。因此，如果airport.x = 100，那么生成的SVG将具有cx="100"。

您可以在此处了解更多信息：https://vuejs.org/v2/guide/syntax.html#Shorthands