生涯現役

独学でやっと掴んだエンジニアへの道筋をなくしたくはない。だから毎日勉強!!

【NUXT.js】まずはクリックロジック

【NUXT.js】まずはクリックロジック

NUXT.js を覚えよう!

まずは色々なロジックを単体で覚えて最終的にはロジックの組み合わせでサイトを構築する、基本的な流れで覚えていこうと思う。

まずはonClickの動作はどのように書けば良いのか・・・?

<template>
    <button class="btn01" v-on:click='isActive01=!isActive01'>こちらをクリック</button>
    <div class="hoge01" v-bind:class='{active:isActive01}'>
      ここの色が変わります。
    </div>
</template>

<script>
export default {

  data(){
    return {
      isActive01: false
    }
  }
}
</script>

<style lang="scss">
.hoge01.active{
  color: #f00;
}
</style>

こんな感じですね。

v-on: は @ に置き換えることも出来るみたいです。

@click='isActive01=!isActive01'

省略はほかでもできるようなので一応知っておいたほうが良さそうです。
文字を知らないと本が読めないように、言語を知らないとプログラムを読めませんからね!

【sample】
https://markupnet.jp/portfolio/nuxt-basic/App01

webmaster

コメントは受け付けていません。