vue实现计算平均分

vue实现计算平均分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算平均分</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<body>


<div align="center"> <p>计算平均分</p></div>

<div id="app" align="center">
<table border="2px">
    <tr>
        <td>数学</td>
        <td><input type="text" v-model="math"></td>
    </tr>
    <tr>
        <td>英语</td>
        <td><input type="text" v-model="english"></td>
    </tr>
    <tr>
        <td>语文</td>
        <td><input type="text" v-model="chinese"></td>
    </tr>
    <tr>
        <td>总分</td>
        <td>{{sum}}</td>
    </tr>
    <tr>
        <td>平均分</td>
        <td>{{avaerage}}</td>
    </tr>
</table>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            math:100,
            english:100,
            chinese:100,
        },
        computed:{
            sum:function () {
                return this.math+this.english+this.chinese ;
            },
            avaerage:function () {
                return Math.round(this.sum/3);
            }
        }

    });
</script>
</html>

如图所示:
计算平均分

  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现学生成绩表单可以按照以下步骤进行: 1. 安装Vue:打开命令行工具,输入以下命令安装Vue ``` npm install vue ``` 2. 创建Vue实例:在HTML文件中引入Vue,并创建Vue实例 ``` <!DOCTYPE html> <html> <head> <title>学生成绩表单</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <table> <thead> <tr> <th>姓名</th> <th>语文成绩</th> <th>数学成绩</th> <th>英语成绩</th> <th>总分</th> <th>平均分</th> </tr> </thead> <tbody> <tr v-for="student in students"> <td>{{ student.name }}</td> <td>{{ student.chinese }}</td> <td>{{ student.math }}</td> <td>{{ student.english }}</td> <td>{{ student.total }}</td> <td>{{ student.average }}</td> </tr> </tbody> </table> </div> <script> var app = new Vue({ el: '#app', data: { students: [ { name: '张三', chinese: 90, math: 85, english: 92 }, { name: '李四', chinese: 85, math: 92, english: 88 }, { name: '王五', chinese: 92, math: 90, english: 95 } ] }, computed: { // 计算总分和平均分 studentsWithScore: function() { var students = this.students; for (var i = 0; i < students.length; i++) { var student = students[i]; student.total = student.chinese + student.math + student.english; student.average = student.total / 3; } return students; } } }); </script> </body> </html> ``` 3. 创建表格:在Vue实例中创建一个students数组,里面包含每个学生的姓名、语文成绩、数学成绩和英语成绩。 4. 计算总分和平均分:在Vue实例中创建一个computed属性studentsWithScore,通过遍历students数组,计算出每个学生的总分和平均分。 5. 渲染表格:在HTML文件中使用v-for指令渲染表格,使用mustache语法显示每个学生的姓名、语文成绩、数学成绩、英语成绩、总分和平均分。 这样,就可以通过Vue实现一个简单的学生成绩表单了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值