Vue.js初心者が入門としてやったこと(1)

JavaScript, vue.jsvue.js

広告

これまで、既にvue.jsについて書いていましたが、これから勉強として、書くのは、このタイトルシリーズでやっていこうと思います。
JavaScript初心者が入門としてやったこと(3)
JavaScript初心者が入門としてやったこと(2)
JavaScript初心者が入門としてやったこと(1)

HTML クラスのバインディング

v-bind:class にオブジェクトを渡すことでクラスを動的に切り替えることができます。今回は勉強としてやってみたので、簡単に書いてしまいました。
もともとある、divのクラス名testにボタンをクリックすることにより、プロパティのstatusがtrueになり、trueの時にdivのクラス名にactiveが追加されるというものです。その時cssでそれぞれのクラスの背景色を指定しているので、クリックする前と後で色が変化するようにしました。

HTML

<html>
<head>
<script src="../node_modules/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="sample2.css">
<script src="sample2.js"></script>
<style type=”text/css”>

</style>
</head>
<body>
<div id=area>
<button v-on:click="clicked">クリック</button>
<div v-bind:class="{ active: status }" class ="test" ></div>
</div>


</body>
</html>

JS

  window.addEventListener("load",()=>{
    change()
  function change(){
  new Vue({
    el: '#area',
    data: {
      status:false
    },
    methods: {
      clicked: function(){
        this.status=true
      }
    }
  })
}
});

CSS

.test{
  height: 300px;
  width: 1000px;
  background-color: blue;
}
.test.active{
  height: 300px;
  width: 1000px;
  background-color: red;
}

気づいたこと

セレクターでクラスを複数持たせることができ、CSS上でorの時に”,” and条件の時に、クラスをつなげることで指定することがわかりました。
クラスに状態をつけることができるので、今後アニメーション等を使う時に活かせそうだと思いました。

広告

JavaScript, vue.jsvue.js