2023-03-23から1日間の記事一覧

mixinを使ってデータをコンポーネント間で共有化する【Vue2】

環境 Vue:2.6.11 内容 mixinを使うことで、export default { } 内に記述するdataやmethodsなどを複数のコンポーネント間で共有することができます。 例えばどのコンポーネントでも使用したいmethodsがあったとして、それぞれのコンポーネントに同じmethodsを…

computedとmethodの違いについて【Vue2】

環境 Vue:2.6.11 内容 computedはVue.jsで使用できる算出プロパティです。データの変更を感知して算出後の値をreturnする機能を持ちます。 下記のコードではcomputedを{{ "computed:" + countOverThreeComputed }}で記述し、countの値が3を超えると表示が切…

v-ifとv-showの違いについて【Vue2】

環境 Vue:2.6.11 内容 Vue.jsのディレクティブv-ifとv-showは、どちらも条件によって画面の描画を切り替える機能を持ちます。 <template> <div> <button type="button" @click="test=!test">ボタン</button> <p v-if="test">v-ifの表示</p> <p v-show="test">v-showの表示</p> </div> </template> <script> export default { data() { return { test:true }; }, }; </script> ボタンを…