VUE前端应用开发课程实验--------实验三

最新推荐文章于 2024-07-12 15:14:43 发布

又菜有爱写

最新推荐文章于 2024-07-12 15:14:43 发布

阅读量157

点赞数 1

分类专栏： vue实验文章标签： vue.js 前端 javascript html css

本文链接：https://blog.csdn.net/m0_54430913/article/details/131242708

版权

vue实验专栏收录该内容

7 篇文章 4 订阅

订阅专栏

一、实验内容：

购物车功能的拓展（商品数量得变化、总价的变化），点击数量+、-按钮实现数量得变化，同时其总价和合计金额发生改变。

二、实验流程

（1）导入vue.js,并制作基本表格

（2）-号按钮绑定del（）方法，+号绑定add（）方法

（3）总计一栏中，设置监听器属性，根据input的改变，计算总价

（4）合计一栏设置computed属性，总价相加得到合计

三、实验源码：

<!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>购物车功能拓展</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
       <table border="1" cellpadding="10">
         <tr>
            <th>名称</th>
           <th>单价</th>
           <th>数量</th>
           <th>总价</th>
        </tr>
        <tr>
            <td>华为手机</td>
            <td>1300</td>
            <td>
                <button @click="del1">-</button><input type="text" v-model="num1"><button @click="add1">+</button>
            </td>
            <td><input type="text" v-model="sum1"></td>
        </tr>
        <tr>
            <td>小米手腕</td>
            <td>310</td>
            <td>
                <button @click="del2">-</button><input type="text" v-model="num2"><button @click="add2">+</button>
            </td>
            <td><input type="text" v-model="sum2"  ></td>
        </tr>
       <tr>
        <td>总价：</td>
        <td colspan="3">{{totalPrice}}</td>
       </tr>
       </table>
    </div>
    <script>
        new Vue({
            el:'#box',
            data() {
                return {
                    num1:0,
                    num2:0,
                    sum1:0,
                    sum2:0,
                }
            },
            watch:{
                num1:function(val){
                    this.sum1 = val *1300
                },
                num2:function(value){
                    this.sum2 = value * 310
                }

            },
            computed:{
                totalPrice(){
                    var totalPrice = 0
                    totalPrice = this.sum1+ this.sum2
                    return totalPrice
                }
            },
            methods: {
                add1(){
                    this.num1++
                    return this.num1
                },
                del1(){
                    if(this.num1>0){
                        this.num1--
                    }
                    return this.num1
                },
                add2(){
                    this.num2++
                    return this.num2
                },
                del2(){
                    if(this.num2>0){
                        this.num2--
                    }
                    return this.num2
                },

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