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 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这 ...
随机推荐
- curl 模拟GET\POST请求,以及curl post上传文件
https://blog.csdn.net/fungleo/article/details/80703365
- django-session和cookie
在Django里面,使用Cookie和Session看起来好像是一样的,使用的方式都是request.COOKIES[XXX]和request.session[XXX],其中XXX是您想要取得的东西的 ...
- 欧盟GDPR通用数据保护条例-原文
GDPR英文原文 https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=uriserv:OJ.L_.2016.119.01.0001.01.ENG&a ...
- CSS伪代码
/*在p之后插入我是好人*/ p.first:after { content: "好人" } /*在p之前插入亲爱的朋友men*/ p:before { content: &quo ...
- java 多线程 day18 ThreadPoolExecutor
http://blog.csdn.net/lipc_/article/details/52025993 https://www.cnblogs.com/trust-freedom/p/6681948. ...
- [css]网站骨架布局作业
实现效果图: 代码实现 第一次写的时候不知道如何下手, 后来摸清规律了,由大到小. 由全局到局部 第一次还遇到区块命名问题, 和哪个该怎么划分问题 第一次还遇到由于划分不规整,所以有些代码没达到预期的 ...
- JDBC连接数据库（一）
原文地址http://www.cnblogs.com/hongten/archive/2011/03/29/1998311.html JDBC连接数据库 创建一个以JDBC连接数据库的程序,包含7个步 ...
- 浅谈location对象
简介 Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址.通过Location对象,可以获取URL中的各项信息,调用对象方法也可 ...
- INNODB锁（2）
在上一篇文章写了锁的基本概述以及行锁的三种形式,这一篇的主要内容如下: 一致性非锁定读 自增长与锁 外键和锁 一致性性非锁定读 一致性非锁定读是InnoDB通过多版本并发控制(MVCC,multi v ...
- 20155201 2016-2017-2《Java程序设计》课程总结
20155201 2016-2017-2<Java程序设计>课程总结 目录 一.每周作业链接汇总 二.实验报告链接汇总 三.代码托管链接 四.课堂项目实践 五.课程收获与不足 六.问卷调查 ...