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 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这 ...
随机推荐
- Ftp服务器配置讲解
ftp.server.ip=192.168.80.130ftp.user=ftpuserftp.pass=ftpuserftp.server.http.prefix=http://image.imoo ...
- [World Wind学习]21.影像切割
本来希望从GlobeMapper中生成切片直接加载到WorldWind中,但是没有成功!所以想比较一下和dstile生成的瓦片到底有什么区别? 所以这才第一次生成并加载了影像瓦片.貌似和GlobeMa ...
- PhotoSwipe中文API(四)
在幻灯片自定义HTML内容 为了使PhotoSwipe显示HTML内容的幻灯片,你需要在幻灯片对象定义html属性.它应该包含HTML字符串或DOM元素对象. var items = [ // sli ...
- PAT 1031 Hello World for U[一般]
1031 Hello World for U (20 分) Given any string of N (≥5) characters, you are asked to form the chara ...
- gcc报错 can not be used when making a shared object; recompile with -fPIC
使用google protobuf时,出现错误 /usr/bin/ld: /usr/local/lib/libprotobuf.a(message_lite.o): relocation R_X86_ ...
- 移动 H5（PC Web）前端性能优化指南
原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...
- numpy模块学习笔记
# encoding=utf-8 import numpy as np from numpy.linalg import * def main(): # 1.最基本的array lst = [[1, ...
- Python: 复数的数学运算
写的最新的网络认证方案代码遇到了一个难题,唯一的解决办法就是使用复数空间,需要使用复数来执行一些计算操作. 复数可以用使用函数complex(real, imag) 或者是带有后缀j 的浮点数来指定. ...
- 使用Linux重定向解决nohup.out无写权限问题
■场景 执行nohup命令的时候,经常会出现下面这种没有写入权限的错误. nohup: ignoring input and appending output to `nohup.out'nohup: ...
- GreenOpenPaint的实现（二）打开显示图片
1.DOC中添加,核心图片文件保存在这里.之所以不用Mat,是因为CVVImage有更好的输入输出函数. 我这里直接使用了public public: CvvImage m_image; 2.重载打开 ...