【Nuxt.js】Nuxt文法編：v-bind

🎈 この記事はWP専用です
https://wp.me/pc9NHC-nh

前置き

Nuxt.js Vue.js を使う上で必須の知識です！
これができるとコンポーネントを活かして
表現の幅を広げることができます🌟

例えば！
親によってクラスの有無を切り替えて
色分けをする、といったことができます💕

基本的な使い方

v-bind:{ 属性名 }="{ 変数 }"

タグの属性を変数にしたい時に使います。
aタグのhref属性をv-bindしてみます。

飛びたいリンク先
http://localhost:3000/

index.vue

<template>
 <div class="page">
   <a v-bind:href="url">リンク</a>
 </div>
</template>

<script>
export default {
 data () {
   return {
     url: '/',
   }
 },
}
</script>

🎈 この記事はWP専用です
　 続きはWPでご覧ください👀
https://wp.me/pc9NHC-nh