[Vue] Vue 3.4 v-bind same-name shorthand

v-bind is a commonly used feature in Vue.js. It can be used to bind a reactive value to an attribute or the content of an element.

<script setup lang="ts">
import { reactive } from 'vue'

const style = reactive({ border: '2px solid black' })
</script>

<template>
  <input v-bind:style="style" />
</template>

And because it’s very common, it comes with a short hand like this:

<template>
  <input :style="style" />
</template>

Now in Vue 3.4, we get a new short hand syntax on top of this, but you can only use it if the variable has the same name as the attribute like what we have here.

<script setup lang="ts">
import { reactive } from 'vue'

const style = reactive({ border: '2px solid black' })
</script>

<template>
  <input :style />
</template>

In this case, we can just use :style.

This is very useful for a small component where you don’t need too much specificity for variable names, you can just name the variables based on the respective attributes you want to bind them to.

<script setup lang="ts">
import { reactive, ref } from 'vue'

const style = ref({ border: '2px solid black' })
const disabled = ref(true)
</script>

<template>
  <input :style :disabled />
</template>

If you want to learn more about v-bind, you can check out the documentation for that.