Vue学习（八）——案例：简单计算器

最新推荐文章于 2024-07-16 19:54:42 发布

云中、漫步

最新推荐文章于 2024-07-16 19:54:42 发布

阅读量444

点赞数 1

分类专栏： Vue学习

本文链接：https://blog.csdn.net/weixin_44075963/article/details/108906176

版权

Vue学习专栏收录该内容

24 篇文章 14 订阅

订阅专栏

要求：使用Vue语法，实现一个简单的加法计算器，实现步骤如下：

通过v-model 实现数值a 和数值b 的双向绑定
给按钮绑定事件让输入框中的值相加
将拿到的结果渲染到页面上

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
    <form action="">
        数值1：
        <input type="text" v-model="num1" ><br>
        数值2：
        <input type="text" v-model="num2" ><br>
        <input type="button" value="计算" v-on:click="handle"><br>
        计算结果：
        <div v-text="result"></div>
    </form>
    </div>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            num1: "",
            num2:"",
            result:""
        },
        methods:{
            handle:function(){
                // 这里需要注意，默认情况下我们得到的data中的数据都是字符串类型的，我们需要使用parseInt转化为整数
                this.result = parseInt(this.num1) + parseInt(this.num2)
            }
        }
    });
</script>
</body>
</html>