vuejs之v-on小例子之实现购买数量的增加和减少

发布时间：2020-12-16 23:04:02 所属栏目：百科来源：网络整理

导读：先看代码： html head script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" / script / body div id ="app" button @click ="sub" - button span {{number}} ="add" + div var app = new Vue({ el: '#app',data: { number: 0 },methods: { sub: fun

先看代码：

<html>

head>
  script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</bodydiv id="app">
    button @click="sub">-buttonspan>{{number}}="add">+div>
    var app = new Vue({
      el: '#app',data: {
        number: 0
      },methods: {
        sub: function () {
          if (this.number != 0) {
            this.number -= 1;
          } else {
            alert("不能再减少了");
          }
        },add: function () {
          if (this.number  10) {
            this.number += 1;
          } else {
            alert("不能再增加了");
          }
        },},})
  </script>
>

结果：

点击加号会一直增加数量，当加到10之后再点击：

点击减号可以减少数量，当数量为0时再点击：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!