vue 计算器小案例

最新推荐文章于 2023-02-10 16:07:42 发布

Joker_L_y

最新推荐文章于 2023-02-10 16:07:42 发布

阅读量478

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Joker_L_y/article/details/103748936

版权

本文通过实例代码介绍了如何使用Vue.js构建一个基本的计算器应用，涵盖了组件化、计算属性和事件处理等核心概念。

摘要由CSDN通过智能技术生成

<!-- 做题步骤.使用v-model,用户输入后他就会传给data中的num1 num2  -->
<!-- 点击按钮后就会计算结果.所以我们就要注册点击事件,以前的方法div.onclick=function(){这里写要做的是} -->
<!-- 在vue中的我们在注册事件直接调用一个方法.然后在实例对象的methods中写以前的函数体. -->
<!-- 最后 添加到p中 -->

<!-- <div id="box">
    <input type="number" v-model="num1">
    <p>+</p>
    <input type="number" v-model="num2">
    <p> <button @click="add()">=</button></p>
    <p>{
  {sum}}</p>
</div>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            num1: '',
            num2: '',
            sum: ''
        },
        methods: {
            add() {
                if (this.num1.trim() && this.num2.trim()) {
                    this.sum = Number(this.num1) + Number(this.num2)
                }
            }
        }