Webview中的Vue.js实现库存实时更新-优快云博客

本文链接：https://blog.youkuaiyun.com/SikML/article/details/122887102

本文介绍如何在Webview应用中利用Vue.js框架实现库存数据的实时变更和页面刷新，讨论了HTML与Vue.js的结合使用，以及在移动应用中优化用户体验的策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>Document</title>
    <style>
        span {
            min-width: 50px;
            display: inline-block;
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>
    <p>
        库存的最小值为0
    </p>
    <div>
        库存：
        <button data-plus="-1000">-1000</button>
        <button data-plus="-100">-100</button>
        <button data-plus="-10">-10</button>
        <button data-plus="-1">-</button>
        <span id="spanNumber">10</span>
        <button data-plus="1">+</button>
        <button data-plus="10">+10</button>
        <button data-plus="100">+100</button>
        <button data-plus="1000">+1000</button>
    </div>

    <script>
        var btn = document.querySelectorAll("button")
        for (var i = 0; i < btn.length; i++) {
            btn[i].onclick = function() {
                //获取要变化多少的数值
                var num = parseInt(this.getAttribute("data-plus"))

                // 获取当前库存
                var now = document.getElementById("spanNumber")
                var nowNum = parseInt(now.innerText)


                if ((num + nowNum) > 0) {
                    now.innerText = nowNum + num
                } else {
                    now.innerText = 0
                }

            }
        }
    </script>
</body>

</html>

库存变更器