HTML之Vue框架计算属性computed的简单使用实现自动计算总分和平均分

HTML之Vue框架计算属性computed的简单使用实现自动计算总分和平均分

  • 预计效果
  • 代码
  • 结果展示

预计效果

页面输入数学、物理、英语分数,自动计算出总分和平均分,并展示到界面,如下图所示
HTML之Vue框架计算属性computed的简单使用实现自动计算总分和平均分_第1张图片

代码

该代码可在我的GitHub中找到,链接在此


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性使用title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<p>数学 p> <p>物理 p> <p>英语 p> <p>总分 {{sumNum}}p> <p>平均分 {{averageNum}}p> div> <script> new Vue({ el: '#app', data: { math : null, physics : null, English : null, }, computed :{ sumNum: function () { return this.math + this.physics + this.English; }, averageNum: function () { return Math.round(this.sumNum / 3); } } }) script> body> html>

结果展示

HTML之Vue框架计算属性computed的简单使用实现自动计算总分和平均分_第2张图片
输入数据,总分和平均分会随着发生变化,效果如下 GIF 所示
HTML之Vue框架计算属性computed的简单使用实现自动计算总分和平均分_第3张图片

你可能感兴趣的:(HTML)