vue计数器

最新推荐文章于 2024-11-04 23:47:32 发布

开心的小老虎

最新推荐文章于 2024-11-04 23:47:32 发布

阅读量67

点赞数

分类专栏： VUE 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_60759077/article/details/120755725

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在Vue.js应用中实现价格的加减功能。通过直接修改数据属性`price`和使用方法`add`、`cut`，两种方式演示了按钮点击时的价格更新。这种方法对于前端开发中的动态数据交互具有实际应用价值。

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

直接进行加减

  <h1>{{price}}</h1>
  <button v-on:click="price++">+</button>
  <button v-on:click="price--">-</button>
  const app = new Vue({
    el:'#app',
    data:{
      price:0,
    },
  })

使用方法进行加减操作

  <h1>{{price}}</h1>
  <button v-on:click="add">+</button>
  <button v-on:click="cut">-</button>
  const app = new Vue({
    el:'#app',
    data:{
      price:0,
    },
    methods:{
      add:function(){
        this.price++
      },
      cut:function(){
        this.price--
      }
    }
  })