点击按钮减少数量，当数量减少为1的时候不可以用

最新推荐文章于 2023-04-20 18:41:18 发布

海绵的诱惑

最新推荐文章于 2023-04-20 18:41:18 发布

阅读量412

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_44282093/article/details/128683221

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

一、Vue 中 disabled是什么？

二、使用步骤

1.在vscode随意创建.hmtl文件

 附: 记得引入vue官方的vue.js文件

2.做了一个统计数量表格：

前言

好好学习，天天向上，耐得住无聊烦躁，你就是蜗牛中的战斗机

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue 中 disabled是什么？

在 Vue 中 disabled的值是受布尔值影响的，false为关闭禁用，true为开启禁用效果。

二、使用步骤

1.在vscode随意创建.hmtl文件

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
        
        })
    </script>
</body>
</html>

附: 记得引入vue官方的vue.js文件

2.做了一个统计数量表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }
        td{
            border: 1px solid gray;
            padding: 15px 30px;
            text-align: center;
        }
        thead{
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>商品名</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>金额</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(sb,index) in items" >
                    <td>{{index+1}}</td>
                    <td>{{sb.name}}</td>
                    <!-- 保留两位小数 -->
                    <td>￥{{sb.price.toFixed(2)}}</td>
                    <td>
                        <!-- disabled限制最低数量 -->
                        <button @click="sb.num--" :disabled="sb.num==1">-</button>
                        <span>{{sb.num}}</span>
                        <button @click="sb.num++">+</button>
                    </td>
                    <td>￥{{sb.price*sb.num}}</td>
                    <!-- splice(i,n):从序号index开始删除n个 -->
                    <td><button @click="items.splice(index,1)">删除</button></td>
                </tr>
            </tbody>
            <tfoot></tfoot>
        </table>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                items:[
                    {name:"小米",price:3222,num:3},
                    {name:"苹果",price:6222,num:1},
                    {name:"华为",price:4222,num:2},
                    {name:"一加",price:3199,num:3},
                ],

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

总结

首先是针对vue中的disabled讲解,:disabled===v-bind:disabled(vue语法糖可省略v-bind),加冒号(:)是让其形成js代码。其次是运用到了v-for去遍历data中的数据,包括保留小数点后两位小数toFixed(2),还有splice(index,x)删除。

海绵的诱惑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击按钮减少数量，当数量减少为1的时候不可以用

文章是针对vue中的disabled讲解,:disabled===v-bind:disabled(vue语法糖可省略v-bind),加冒号(:)是让其形成js代码。其次是运用到了v-for去遍历data中的数据,包括保留小数点后两位小数toFixed(2),还有splice(index,x)删除。
复制链接

扫一扫