参考《Vue,js》实战（梁灏编著）

shop-bus:实战：利用计算属性、指令等知识开发购物车

git代码地址
index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>购物车示例</title><link rel="stylesheet" type="text/css" href="style.css">
</head>
<body><!-- v-cloak解决初始化慢导致页面闪动的方法 --><div id="app" v-cloak><template v-if="list.length"><table><thead><tr><th></th><th>商品名称</th><th>商品单价</th><th>购买数量</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in list"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><button @click="handleReduce(index)":disabled="item.count === 1">-</button>{{item.count}}<button @click="handleAdd(index)">+</button></td><td><button @click="handleRemove(index)">移除</button></td></tr></tbody></table><div>总价：¥ {{totalPrice}}</div></template><div v-else>购物车为空</div></div><script src="https://unpkg.com/vue/dist/vue.min.js"></script><script src="index.js"></script>
</body>
</html>

index.js

var app = new Vue({el: '#app',data:{list:[{id:1,name: 'iPhone 7',price: 6188,count:1},{id:2,name: 'iPad Pro',price: 5888,count:1},{id:3,name: 'MacBook Pro',price: 21488,count:1}]},computed:{totalPrice:function(){var total = 0;for(var i=0;i<this.list.length;i++){var item = this.list[i];total+=item.price * item.count;}return total.toString().replace(/\B(?=(\d{3})+$)/g,',');}},methods:{handleReduce:  function(index){if(this.list[index].count === 1) return;this.list[index].count--;},handleAdd: function(index){this.list[index].count++;},handleRemove: function(index){this.list.splice(index,1);}}
})

style.css

[v-cloak]{display: none;
}
table{border: 1px solid #e9e9e9;border-collapse: collapse;border-spacing: 0;empty-cells: show;
}
th, td{padding: 8px 16px;border: 1px solid #e9e9e9;text-align: left;
}
th{background: #f7f7f7;color: #5c6b77;font-weight: 600;white-space: nowrap;
}

Vue.js学习笔记—shop-bus:实战：利用计算属性、指令等知识开发购物车相关推荐

Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
Vue.js学习笔记—sort-table：实战：使用Render函数开发可排序的表格组件
参考<Vue,js>实战(梁灏编著) sort-table:实战:使用Render函数开发可排序的表格组件 index.html <!DOCTYPE html> <htm ...
Vue.js学习系列（二十七）-- 计算属性（一）
2019独角兽企业重金招聘Python工程师标准>>> 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
遇见 vue.js --------阿文的vue.js学习笔记（8 —1）------- 列表渲染
** 新学习新征程,我们一起踏上学习 vue.js的新长征遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...
Vue.js 学习笔记第5章内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车回顾一下第2.2节,我们己经介绍过指令(Di ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...

Vue.js学习笔记—shop-bus:实战：利用计算属性、指令等知识开发购物车

shop-bus:实战：利用计算属性、指令等知识开发购物车

Vue.js学习笔记—shop-bus:实战：利用计算属性、指令等知识开发购物车相关推荐

最新文章

热门文章