Zenn
👌

Vue.js ButtonのValueに変数を指定する方法

2022/01/22に公開
Vue.js
tech

Vue.jsでButtonのvalueに、変数を指定する方法がわからず、調べたため共有します。
結論から言うと、valueの前に「v-bind」をつけます。
<button v-bind:value="var">Button</Button>

下記、サンプルコードです。

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <button v-bind:value="btnValue">Search</button>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    btnValue: 'val',
                }
            }
        })

        const vm = app.mount('#app')
    </script>
    </body>
    </html>

Discussion