2020-08-14から1日間の記事一覧
computed 算出プロパティはデータに指定した加工をして返すプロパティ 直接データを加工するようにもかけるが ごちゃごちゃしてわからなくなるの算出プロパティを使う computed:{ プロパティ名: 関数オブジェクト } 記入例 <div id="app" v-bind:style="errMessage"> <input type="number" v-model="price"> <p>{{ price | comma}}円</p> <p>合計:{{ p</p></div>…
filters 出力されるデータにfiltersで設定した要素を付けることで データを加工することができる {{ データ名 | 関数オブジェクト }} 関数オブジェクトを同じように付けることによって 複数のフィルターを付けることができる v-bindにも付けることが可能 < …
v-bind 属性に出力 属性にデータを入れるためには、追加したいデータを属性の値に記入してその属性名の前にv-bindをつける < 要素名 v-bind: 属性名 = " データ名 "> 要素名は value , style , class などに使用できる 入力例 <body> <div id="app"> <input type="text" v-bind:value="message"> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <script> var app = ne…
Vue導入方法 ダウンロードして直接書き込む Vue公式 CDNで導入 最新版で導入 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 最新版で導入する場合、バージョンの変更で動かない場合がある 特定バージョン番号、ビルド番号にリストする <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
Vue.jsとは ウェブアプリケーションのUIを構築するためのJavascriptフレームワーク Vue.jsの特徴 複雑なDOMを操作する必要がなくなる HTML形式でテンプレートを設定して データをjavascritptで定義することで Vueが自動的にデータを更新する 簡単に言うと「V…
