（28）打鸡儿教你Vue.js
2024-08-23 04:25:03
单件商品金额计算和单选全选功能
new Vue({
el: '#app',
data: {
totalMoney: 0,
productList: []
},
filters: {
formatMoney: function (value) {
return "￥ " + value.toFixed(2);
},
},
mounted: function() {
this.$nextTick(function(){
this.cartView();
});
},
methods: {
cartView: function() {
let _this = this;
this.$http.get("data/cartData.json", {"id":123}).then(res=>{
this.productList = res.body.result.list;
this.totalMoney = res.body.result.totalMoney;
});
}
}
});
Vue.filter("money", function(value,type) {
return "￥ "+value.toFixed(2) + type;
})
changeMoney: function(product, way){
if(way>0){
product.productQuentity++;
}else{
product.productQuentity--;
if(product.productQuentity<1){
product.productQuentity = 1;
}
}
}
selectedProduct: function (item) {
if(typeof item.checked == 'undefined'){
Vue.set(item, "checked", true);
}else {
item.checked = !item.checked;
}
}
地址列表
new Vue({
el: '.container',
data: {
addressList: []
},
mounted: function() {
this.$nextTick(function(){
});
},
methods: {
getAddressList: function() {
var _this = this;
this.$http.get("data/address.json").then(function (response){
var res = response.data;
if(res.status == "0"){
_this.addressList = res.result;
}
});
}
}
});
v-model v-text v-show v-if v-bind v-for v-on
axios
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群：711613774
最新文章
- .NET LINQ 转换数据类型
- PS切图篇
- 移动端弹性布局--flex
- nodejs解决找不到express命令的问题
- Android消息机制源码分析
- Maven 库
- map函数
- 随便谈谈用canvas来实现文字图片粒子化
- Q3: Linked List Cycle II
- sqlplus 远程oracle
- Python学习笔记——面向对象基础
- CSS3 概览 更新时间 2014-0412-1317
- deb文件安装命令
- 优先队列（和fence repair完全一样）
- Enze fifth day(循环语句2)
- 全面了解Android热修复技术
- linux shell 推断文件或目录是否真的存在
- snmp监控f5
- chat.css
- Java向下转型的意义