Vue实现简单的购物车

Vue方法的优劣探讨
最新推荐文章于 2023-07-04 23:47:38 发布
最新推荐文章于 2023-07-04 23:47:38 发布
阅读量177 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 简单实例 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44990139/article/details/95523306
博客围绕Vue相关方法展开，提及了一种被认为是‘最垃圾’的方法，同时也指出存在略有改进的情况，聚焦于Vue方法的不同表现。
最垃圾的方法
<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border=1 align="center" width="40%">
            <tr align="center">
                <th>
                    商品名称
                </th>
                <th>
                    商品图片
                </th>
                <th>
                    商品单价
                </th>
                <th>
                    数量商品
                </th>
            </tr>
            <tr  align="center">
                <td>尿不湿</td>
                <td>
                    <img :src="imgurl1" alt="" width="50px">
                </td>
                <td>{{price1}}</td>
                <td>
                    <button @click="add1">+</button>
                    <input type="text" id="nbs" size="1" :value="value1">
                    <button @click="dele1">-</button>
                </td>
            </tr>
            <tr align="center">
                <td>酱油</td>
                <td>
                        <img v-bind:src="imgurl2" alt="" width="50px">
                </td>
                <td>{{price2}}</td>
                <td>
                    <button @click="add2">+</button>
                    <input type="text" id="nbs" size="1" :value="value2">
                    <button @click="dele2">-</button>
                </td>
            </tr>
            <tr align="center">
                <td>毛衣</td>
                <td>
                        <img :src="imgurl3" alt="" width="50px">
                </td>
                <td>{{price3}}</td>
                <td>
                        <button @click="add3">+</button>
                        <input type="text" id="nbs" size="1" :value="value3">
                        <button @click="dele3">-</button>
                </td>
            </tr>
            <tr>
                <td colspan="4" align="right">
                    总价: <input type="text" id="zj" size="5" :value="all">                
                </td>
            </tr>
        </table>

    </div>

    <script>

    const app=new Vue({
        el:"#app",
        data:{
            imgurl1:"icon/nbs.png",
            imgurl2:"icon/jy.png",
            imgurl3:"icon/my.png",
            value1:0,
            value2:0,
            value3:0,
            all:0,
            price1:15,
            price2:13,
            price3:42
        },
        methods:{
            add1:function(){
                
               this.value1= this.value1+1,
               this.all+=this.price1
            },
            add2:function(){
               this.value2= this.value2+1,
               this.all+=this.price2
            },
            add3:function(){
               this.value3= this.value3+1,
               this.all+=this.price3
            },
            dele1:function(){
                if(this.value1>=1){
                    this.value1= this.value1-1,
                    this.all-=this.price1
                }
               
            },
            dele2:function(){
                if(this.value2>=1){
                    this.value2= this.value2-1,
                    this.all-=this.price2
                }
            },
            dele3:function(){
                if(this.value3>=1){
                    this.value3= this.value3-1,
                    this.all-=this.price3
                }
            }
            
        }
    })
    
    </script>



</body>
</html>

略有改进

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
        <div id="app">
                <table border=1 align="center" width="40%">
                    <tr align="center">
                        <th>
                            商品名称
                        </th>
                        <th>
                            商品图片
                        </th>
                        <th>
                            商品单价
                        </th>
                        <th>
                            数量商品
                        </th>
                    </tr>
                    <tr v-for="item in items" align="center">
                        <td>
                            {{item.name}}
                        </td>
                        <td>
                            <img v-bind:src="item.img" alt="" width="50px">
                        </td>
                        <td>
                            {{item.danjia}}
                        </td>
                        <td>
                                <button @click="item.number+=1">+</button>
                                {{item.number}}
                                <button @click="item.number<=1 ? item.number=0 : item.number-=1">-</button>
                        </td>
                    </tr>
                    <tr align="right">
                        <td colspan="4">
                            总价: {{alll}}
                        </td>
                    </tr>
                </table>
        </div>
<script>

    const app=new Vue({
        el:"#app",
        data:{
            all:0,
            items:[
                {name:"尿不湿",img:"icon/nbs.png",danjia:15,number:0},
                {name:"酱油",img:"icon/jy.png",danjia:6,number:0},
                {name:"毛衣",img:"icon/my.png",danjia:45,number:0}
            ]

        },
        computed: {
            
            alll:function(){
               let num=0;
               for (let i = 0; i <this.items.length; i++) {
                    num+=this.items[i].number*this.items[i].danjia;
                   
               }

               return num;
            }
             
        },
        })
       
</script>

</body>
</html>
Vue之利用指令和computed计算属性实现简单的购物车
小白牛的博客
05-06 1598
Vue的本质就是实现数据操作DOM 购物车的知识点： 对于vue中computed计算属性的理解 对于vue中双向数据绑定的理解的运用v-model 业务逻辑的处理 HTMl部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt...
Vue实现简易购物车功能
YY的博客
11-22 8927
Vue实现简易购物车功能
vue搭建购物车页面
02-23
利用vue搭建购物车页面webpack打包vue，js文件，共享数据双向绑定，全选和反选以及计算功能
vue实现书籍购物车案例（基本语法使用）
那就这样吧~
12-14 446
案例工程结构： index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="app"> <div v-i
Vue实现简单版的购物车
Make Excellence a Habit
08-20 663
首先我们要导入Vue的js <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> 还有导入 这次我用到了bootstrap来布局 <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" ...
vue实现简单的购物车功能
weixin_30907935的博客
09-12 145
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http...
Vue实现简易购物车功能（初学篇拿来即用）
m0_71966801的博客
07-04 2082
当购物车数据发生变化，例如商品数量增加、价格计算等，Vue会自动重新渲染相关的视图部分，保持数据和视图的同步。例如添加商品、删除商品、编辑商品等操作，通过调用这些方法来更新购物车的数据和视图。计算属性和监听器：Vue还提供了计算属性和监听器的功能，用于处理一些复杂的逻辑计算和数据侦听。通过绑定事件，可以触发特定的逻辑操作，例如添加商品、删除商品、编辑商品等。数据绑定：使用Vue的模板语法将定义的数据与HTML模板进行绑定，将数据动态展示在页面上。选项定义购物车所需的数据，例如商品列表、商品数量、总价等。
vue实现商城购物车功能
12-29
本文实例为大家分享了vue实现商城购物车功能的具体代码，供大家参考，具体内容如下 首先，先上最终的效果图 效果并不是很好看，但是这不是重点。 首先，我们先看下布局： 购物车 (item,index)> ...
【JavaScript源代码】Vue实现简易购物车案例.docx
12-29
在本篇文档中，我们将探讨如何使用Vue.js框架实现一个简单的购物车案例。Vue.js是一个流行的前端JavaScript框架，它提供了一种声明式的数据绑定和组件化的方法，使得开发Web应用更为简便。在这个案例中，我们将涉及...
vue实现简单购物车功能
qq_48640070的博客
09-24 469
vue购物车纯前端
一个简单购物车案例.html
04-24
一个简单的vue购物车案例，希望能够对你们有用，希望各位不要嫌弃。
Vue实现购物车功能
08-30
本篇文章主要分享了Vue实现购物车功能的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧
vue实现一个简单的购物车功能
前端岚枫
08-24 7476
今天做了一个简单的购物车功能，主要用了计算属性，指令等知识点，代码如下： &lt;template&gt; &lt;div&gt; &lt;div id="cart" v-cloak&gt; &lt;template v-if="itemlis.length"&gt; &lt;table&gt; &lt;t
用Vue2.0实现一个简单的购物车页面
Freya_yyy的博客
07-25 3662
在学习Vue的初级阶段，练习一个小的应用，即用Vue实现一个购物车页面。在学习过程中，能极大地体会到Vue的强大和方便，用更少的代码渲染完整的页面，减少了HTML代码的冗余。 首先，写出一个购物车页面的大致样式，相关代码及页面展示如下所示。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content...
Vue之简单购物车功能
热门推荐
a271720559的博客
08-06 2万+
                                          Vue之购物车功能 今天来看看vue怎么实现简单的购物车功能。 效果图：  我们都知道vue是数据驱动和组件化的模式。意思就是只要绑定的数据改变其他的变化由vue去完成，无须再去操作dom。 我们来看看简单的购物车功能怎么实现： 1.先完成数据绑定 代码： html： &lt;tr v-for=...
vue实现简单的购物车方法
夜惊如水
09-28 901
export default { name: 'HelloWorld', data () { return { products: [ {isSeleted:false,price:30.58,count:1,name:'雀巢01'}, {isSeleted:false,price:40.98,count:2,name:'雀巢02'},...
（VueJs）实现一个简单的购物车
黑胡子大叔的博客
03-08 1206
Html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="demo.css"> </head> &l...
初学vue案例之简单购物车实现
qq_41702354的博客
04-12 658
初学vue案例之简单购物车实现 最近刚开始接触vue.js框架，就自己写了些小案例来练练手，适合初学者，简单易懂，也不需要太多基础，只要稍微懂点json，然后看过了一些基本的vue 教程就行了。需要自己导入vue.js ,话不多说 just do it！！！ html代码 <div id="app"> <table id="tbl"> <tr> ...
Vue 做调查问卷简单实例
qq_44990139的博客
07-15 9846
主代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
Vue实现简单购物车案例完整代码分享
"Vue实现简单购物车案例" 本文将详细介绍 Vue 实现简单购物车案例的知识点。 **知识点1: Vue.js 简介** Vue.js 是一个渐进式、灵活的 JavaScript 框架，用于构建用户界面。它提供了一个核心库，专注于视图层，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值