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 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这 ...
随机推荐
- 利用阿里云腾讯云正版KMS服务器端口转发
注意:以下内容仅供实验,请勿用于任何非法用途我们知道,阿里云和腾讯云在内网部署了KMS服务器,而且是正版的,那么,有没有办法使用公网的计算机直接或间接连接到这些KMS服务器呢,受代理服务器和跳板机配置 ...
- es navi map+++++++nginx logs-parser
http://www.cnblogs.com/ahaii/p/7410421.html [2017-12-17T00:01:03+08:00] ["GET /user/comm/login? ...
- mysql 表的增删改查
一.表介绍 表相当于文件,表中的一条记录就相当于文件的一行内容,不同的是,表中的一条记录有对应的标题,称为表的字段 对于一张表来说,字段是必须要有的. 数据表 类似于excel id,name,qq, ...
- JavaScript类库汇总
日期处理Moment.js http://momentjs.cn/ http://momentjs.com/ nodejslinq,jslinq http://jslinq.codepl ...
- (android实战)破解apk
简单的总结几个关键步骤: 一.工具准备:apktool , dex2jar , jd-gui 二.使用dex2jar + jd-gui 得到apk的java源码 1.用解压工具从 apk包中取出 cl ...
- HttpClient发送get,post接口请求
HttpClient发送get post接口请求/* * post * @param url POST地址 * @param data POST数据NameValuePair[] * @retur ...
- xshell过期了怎么办，是学生就用学生版吧
访问这里:https://www.netsarang.com/download/software.html 点击Free for Home & School 下载家庭版和学生版 来到这个页面了 ...
- sqlserver create table
①sql 语句创建(项目使用) use sps_db go if exists(select name from sys.tables where name='event_profile_level2 ...
- Core Java 4
p272~p273 1.除捕获异常外的另一种异常处理方式:将异常继续传递给方法调用者. 即:在方法首部添加throws说明符号,取代 try catch语句. 对于方法的调用者而言:要么处理异常,要么 ...
- bzoj1625 / P2871 [USACO07DEC]手链Charm Bracelet
P2871 [USACO07DEC]手链Charm Bracelet 裸01背包. 看到自己1年半前写的30分code.......菜的真实(捂脸) #include<iostream> ...