【Vue.js】消費税を計算する機能を作りたい
<div id="app"> <h1>消費税計算(消費税0.8%の時)</h1> <!--v-modelはhtmlでいうところのvalueに等しいと思われる--> <input type="text" v-model="badget">円 <h2>税込価格に変えると</h2> <p>{{ badgetChnage }}円の価値があります。</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var app = new Vue({ el:'#app', data:{ badget: 100 }, computed:{ badgetChnage: function() { return this.badget * 1.08; } } }); </script>
<!--v-modelはhtmlでいうところのvalueに等しいと思われる--> <input type="text" v-model="badget">円
ですが、
v-model は任意の form 要素にある value、checked または selected 属性の初期値を無視します。input または textarea は常に、信頼できる情報源として Vue インスタンスを扱います。コンポーネントの data オプションの中で JavaScript 側で初期値を宣言する必要があります。
フォーム入力バインディング — Vue.js
とのこと。