👨‍💻

v-bind 省略記法(vueの :xxxはどういう意味ですか?)

2023/02/14に公開

v-bind 省略記法

<!-- 完全な構文 -->
<a v-bind:href="url"> ... </a>

<!-- 省略記法 -->
<a :href="url"> ... </a>

<!-- 動的引数の省略記法 (2.6.0 以降) -->
<a :[key]="url"> ... </a>

v-on 省略記法

<!-- 完全な構文 -->
<a v-on:click="doSomething"> ... </a>

<!-- 省略記法 -->
<a @click="doSomething"> ... </a>

<!-- 動的引数の省略記法 (2.6.0 以降) -->
<a @[event]="doSomething"> ... </a>

https://v2.ja.vuejs.org/v2/guide/syntax.html#省略記法

Discussion