“Vue 计数器”的版本间的差异

2023年6月8日 (四) 13:50的最新版本

https://www.bilibili.com/video/BV12J411m7MG/?p=10

<div class="input-num">
  <button @click>-</button>
  <span>{{}}</span>
  <button @click>+</button>
</div>

var app = new Vue({
  el:"#app",
  data:{
    num:1
  },
  methods:{
    add:function(){},
    sub:function(){}
  }
})

data 中定义数据：比如 num
methods 中添加两个方法：比如 add（递增），sub（递减）
使用 v-text 将 num 设置给 span 标签
使用 v-on 将 add, sub 分别绑定给 +,- 按钮
累加的逻辑：小于10累加，否则提示
递减的逻辑：大于0递减，否则提示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue基础</title>
</head>

<body>
    <div id="app">
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{ num }}</span>
            <button @click="add">
                +
            </button>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert("别点啦，最大啦！");
                    }

                },
                sub: function () {
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("别点啦，最小啦！");
                    }

                }
            }
        })
    </script>
</body>

</html>

总结

创建 Vue 实例时：el（挂载点），data（数据），methods（方法）
v-on 指令的作用是绑定事件，简写为 @
方法中通过 this，关键字获取 data 中的数据
v-text 指令的作用是：设置元素的文本值，简写为 {{}}

“Vue 计数器”的版本间的差异

2023年6月8日 (四) 13:50的最新版本

总结

导航菜单

搜索