環境 Vue:2.6.11 内容 Vue.jsのフイルターという機能を使うことで、画面に表示されるテキストを自由にフォーマットすることができます。 ローカルフィルター <template> <table> <p {{sample | lowerCase}} </p> </table> </template> <script> export default { data() { return { // この文字列を小文字化する sample:"VUESAMPLE" } },…

環境 Vue:2.6.11 内容 Vue.jsで、どのコンポーネントからでも呼び出し可能な定数を定義したいとき、コンポーネント外のjsファイルで一括管理することができます。 1. script内で定数を使用したい場合 srcの下にconsts/const.jsを作成します。 src/consts/con…

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

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

環境 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> ボタンを…