v-bind 属性値のない属性へのバインド

date
Mar 2, 2023
repo_url
slug
vbind-noattr
status
Published
summary
type
Post
thumbnail_url
tags
vue
outer_link

属性値のない属性へのバインド

disabledやreadonlyなど、属性値のない場合は下記のように使う。
<script setup lang="ts">
import {ref} from "vue";

const isDisabled = ref(true);
</script>

<template>
  <button type="button" v-bind:disabled="isDisabled">送信</button>
</template>
↓レンダリング
<button type="button" disabled>送信</button>

© Hayato Kamiyama 2023 - 2024 - Build with Next.js & Notion