-
vue中的computed 计算
- 注意事项
- 需要注意变量刚创建默认是字符串类型,需要手动改为整数类型 用parseInt(变量名)来把字符串转化成数字
- 前三个输入框用v-model来绑定,后两个显示结果的要用v-bind:value来绑定进行双向绑定
- 效果展示:
- 代码实现
<div id="chang3"> <!--用vue来实现简单的计算机效果--> <p>用vue来实现简单的计算机效果</p> 语文: <input type="number" v-model.number="a2" /><br /> 数学: <input type="number" v-model.number="b2" /><br /> 英语: <input type="number" v-model.number="c2" /><br /> 总分: <input type="number" name="" id="" :value="sum" /><br /> 平均分: <input type="number" name="" id="" :value="sum/3" /><br /> </div> <script> var vm=new Vue({ el:'#chang3', data:{ a2:0, b2:0, c2:0, }, computed:{ sum:function(){ return this.a2+this.b2+this.c2; } } }) </script>
- 注意事项