043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>组件之使用.sync修饰符与computed计算属性实现购物车原理</title>
<script src="vue.js"></script>
</head> <body>
<div id="hdcms">
<hd-news :listdata.sync="goods"></hd-news><!--@sum的作用是把父組件的事件綁定到子組件中-->
<h2>总价：{{totalPrice}}</h2>
</div>
<script typeof="text/x-template" id="hdNews">
<table border="2" bordercolor="black" cellspacing="0" cellpadding="20">
<tr>
<td>商品名称</td>
<td>价格</td>
<td>数量</td>
</tr>
<tr v-for="(v,k) in listdata">
<td>{{v.name}}</td>
<td>{{v.price}}</td>
<td>
<input type="text" v-model="v.num"><!--失去焦点之后触发子组件绑定的事件-->
</td>
</tr>
</table>
</script>
<script>
var hdNews = {
template: "#hdNews",
props: ['listdata'],//继承父组件的数据
};
new Vue({
el: "#hdcms",
components: {hdNews},
computed:{
totalPrice(){
var sum=0;
this.goods.forEach((v) => {
sum += v.num * v.price;
});
return sum;
}
},
data: {
goods: [{
name: '苹果X',
price: 200,
num: 1
},
{
name: '华为P10',
price: 100,
num: 1
},
{
name: '小米6',
price: 50,
num: 1
},
]
}
});
</script> </body> </html>
043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理的更多相关文章
- 43.VUE学习之--组件之使用.sync修饰符与computed计算属性超简单的实现美团购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中v-model解析、sync修饰符解析
上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...
- vue组件双向绑定.sync修饰符的一个坑
我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...
- Vue中v-model指令的常用修饰符
v-model指令有三个可以选用的修饰符:.lazy..number以及.trim.vue官方对此的描述为: .number-输入字符串转为有效的数字 .lazy-取代input监听change事件 ...
- Vue（七）：computed计算属性
简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...
- Vue学习笔记【31】——Vue路由（computed计算属性的使用）
computed计算属性的使用 默认只有getter的计算属性: <div id="app"> <input type="text" ...
- Vue之computed计算属性
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- vue中的.sync修饰符用法
在项目中接触到父组件传值给子组件的时候,想在子组件改变父组件传的值.(比如用于弹窗关闭) 但是正常来说,vue2是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...
- sync 修饰符在Vue中如何使用
在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这 ...
随机推荐
- flask的session用法2
from flask import Flask, session, redirect, url_for, escape, request app = Flask(__name__) @app.rout ...
- nginx:负载均衡的session共享
一.场景 当nginx做了负载均衡之后,同一个ip的url请求服务器的时候,负载均衡会根据每台服务器的权重等一些设置将请求转发到不同的服务器上去进行处理,这样的话针对一些带有状态请求的情况来说就是个很 ...
- java-mybaits-00801-逆向工程
1.1 什么是逆向工程 参看地址:http://www.mybatis.org/generator/index.html 使用官方网站的mapper自动生成工具mybatis-generato ...
- 跟我学Makefile（五）
文件名操作函数 每个函数的参数字符串都会被当做一个或是一系列的文件名来对待. $(dir <names...>) 名称:取目录函数——dir. 功能:从文件名序列<names> ...
- 20155307 2016-2017-2 《Java程序设计》第8周学习总结
20155307 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 日志API:使用日志的起点是Logger类,要取得Logger类,必须使用Logger的静态 ...
- 生成TPC-H数据集
下载tpc-h tool 版本有点老,2.14.3,够用了. 在解压的文件夹下面cd到dbgen下,找到makefile.suite. ~/tpch_2_14_3$ cd dbgen~/tpch_2_ ...
- AVAudioFoundation(5)：音视频导出
本文转自:AVAudioFoundation(5):音视频导出 | www.samirchen.com 本文主要内容来自 AVFoundation Programming Guide. 要读写音视频数 ...
- 两步实现在Git Bash中用Sublime打开文件
每次都要用鼠标点来点去才能用sublime打开文件!太不科学!今天来配置一下在Git bash中用sublime打开文件 方法 新建一个文件命名为你想要的命令,比如 subl(注意不能有后缀名),内容 ...
- TrueCrypt简介及TrueCrypt 7.1a Source.zip源码在VS2008下的编译过程
转载:http://blog.csdn.net/cncrypt/article/details/51565493 转载:http://www.cnblogs.com/shenjieblog/p/521 ...
- HDU 3709 Balanced Number（数位DP）题解
思路: 之前想直接开左右两边的数结果爆内存... 枚举每次pivot的位置,然后数位DP,如果sum<0返回0,因为已经小于零说明已经到了pivot右边,继续dfs只会越来越小,且dp数组会炸 ...