Vue 自动计算累计值

最新推荐文章于 2023-07-24 15:19:45 发布

HPF4212

最新推荐文章于 2023-07-24 15:19:45 发布

阅读量2.3k

点赞数

分类专栏：前端 Vue 文章标签： vue.js html5

本文链接：https://blog.csdn.net/hanxia159357/article/details/114011358

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

1、应用场景

累计账款

2、所有技术

Vue中的计算属性computed（只有在值发生变化时才执行）
双向绑定

3、实现

PS：此处重要的是双向绑定与计算属性的用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>累计账款示例</title>
    <script src="../JavaScripts/vue/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id='app'>
        <input v-model = 'num1'></input>
        <input v-model = 'num2'></input>
        <p>合计：{{sum}}</p>
    </div>
    <script text = 'text/javascript'>
        var app = new Vue({
            el: "#app",
            data:{
                num1:1,
                num2:2
            },
            computed:{
                sum:function(){
                    return Number(this.num1) + Number(this.num2)
                }
            }
        });
    </script>
</body>
</html>

运行结果：

4、不足与改进

4.1 不足

本代码仅为示例，并未对输入数据进行校验，若输入不为数字则会出现问题

4.2 改进

在input标签中添加类型：

<input v-model = 'num1' type="number"></input>
<input v-model = 'num2' type="number"></input>

HPF4212

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 自动计算累计值

1、应用场景累计账款2、所有技术Vue中的计算属性双向绑定3、实现PS：此处重要的是双向绑定与计算属性的用法。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
复制链接

扫一扫