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 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这 ...
随机推荐
- ios开发 内测包添加测试UDID
内侧包添加 UDID: 1.蒲公英获取设备UDID https://www.pgyer.com/udid 2. 登录开发者中心 --> Certificates, Identifiers ...
- 自旋锁原理及java自旋锁
一.自旋锁的概念 首先是一种锁,与互斥锁相似,基本作用是用于线程(进程)之间的同步.与普通锁不同的是,一个线程A在获得普通锁后,如果再有线程B试图获取锁,那么这个线程B将会挂起(阻塞):试想下,如果两 ...
- 如何打造高性能Web应用
Sean Hull是Heavyweight Internet Group的创始人兼高级顾问,拥有20年以上技术顾问相关经验,曾为多家知名机构提供咨询,其中包括The Hollywood Reporte ...
- Farthest Nodes in a Tree ---LightOj1094（树的直径）
题目链接:http://lightoj.com/volume_showproblem.php?problem=1094 Given a tree (a connected graph with no ...
- 小米范工具系列之五：小米范WEB口令扫描器
最新版本1.2,下载地址:http://pan.baidu.com/s/1c1NDSVe 文件名 webcracker,请使用java1.8运行 小米范WEB口令扫描器的主要功能是批量扫描web口令 ...
- 【Loadrunner】性能测试报告实战
一.一份好的性能测试报告需要遵循什么规则? 好的报告只需要遵循3点即可:清晰的结构.简要的语言以及数据的对比. 二.如何用Loadrunner自动到处HTML以及word版的报告? 1.导出html格 ...
- EasyUI Easyloader 加载器
用法 加载 EasyUI 模块 easyloader.base = '../'; // 设置 easyui 的基本目录 easyloader.load('messager', function(){ ...
- （转）《SSO CAS单点系列》之 实现一个SSO认证服务器是这样的！
上篇我们引入了SSO这个话题<15分钟了解SSO是个什么鬼!>.本篇我们一步步深入分析SSO实现机理,并亲自动手实现一个线上可用的SSO认证服务器!首先,我们来分析下单Web应用系统登录登 ...
- java -- JVM的符号引用和直接引用
在JVM中类加载过程中,在解析阶段,Java虚拟机会把类的二级制数据中的符号引用替换为直接引用. 1.符号引用(Symbolic References): 符号引用以一组符号来描述所引用的目标,符号可 ...
- 搞定PHP面试 - 正则表达式知识点整理
一.简介 1. 什么是正则表达式 正则表达式(Regular Expression)就是用某种模式去匹配一类字符串的一种公式.正则表达式使用单个字符串来描述.匹配一系列匹配某个句法规则的字符串.正则表 ...