43.VUE学习之--组件之使用.sync修饰符与computed计算属性超简单的实现美团购物车原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="hdcms">
<!-- .sync 当数据改变时,会自动把子组件里的值赋值到父组件goods里,当goods的值改变时,totalPrice又会重新计算-->
<hd-news :lists.sync="goods" ></hd-news>
总计:{{totalPrice}}元
</div>
<script type="text/x-template" id="hdNews">
<table border="1" width="90%">
<tr>
<th>商品名称</th><th>商品价格</th><th>商品数量</th><th>合计</th>
</tr>
<tr v-for="(v,k) in lists">
<td>{{v.title}}</td>
<td><input type="text" v-model="v.price"></td>
<td>
<input type="text" v-model="v.num">
</td>
<td>{{v.price*v.num}}</td>
</tr>
</table>
</script>
<script>
var hdNews = {
template: "#hdNews",
props: ['lists']
};
new Vue({
el: '#hdcms',
components: {hdNews},
//页面加载完后,加自动执行
computed:{
totalPrice(){
var sum=0;
this.goods.forEach((v)=>{
sum+=v.num*v.price;
})
return sum;
}
},
data: {
goods:[
{title:'iphone7Plus',price:100,num:1},
{title:'后盾人会员',price:200,num:1},
]
}
});
</script>
</body>
</html>
效果:
43.VUE学习之--组件之使用.sync修饰符与computed计算属性超简单的实现美团购物车原理的更多相关文章
- 43_2.VUE学习之--不使用组件computed计算属性超简单的实现美团购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件双向绑定.sync修饰符的一个坑
我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...
- 小白学习vue第三天，从入门到精通（computed计算属性）
computed计算属性 <body> <div id="app"> <div>{{myName}}</div> </div& ...
- vue组件中的.sync修饰符使用
在vue的组件通信props中,一般情况下,数据都是单向的,子组件不会更改父组件的值,那么vue提供.sync作为双向传递的关键字,实现了父组件的变动会传递给子组件,而子组件的carts改变时,通过事 ...
- Vue学习笔记【13】——键盘修饰符以及自定义键盘修饰符
1.x版本中自定义键盘修饰符[了解] Vue.directive('on').keyCodes.f2 = 113; 2.x版本中自定义键盘修饰符 通过Vue.config.keyCodes.名称 = ...
- Vue学习笔记【6】——事件修饰符
.stop 阻止冒泡(阻止事件向外层冒泡) .prevent 阻止默认事件(链接跳转.表单提交) .capture 添加事件侦听器时使用事件捕获模式(从外到里触发事件) .self 只当事件在该元素本 ...
- vue学习之组件
组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...
- Vue学习之组件切换及父子组件小结（八）
一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...
随机推荐
- Unity3D C# 学习List数据类型的使用
List<T>类是ArrayList 类的泛型等效类. 该类使用大小可按需动态增加的数组实现 泛型的好处: 它为使用 c#语言编写面向对象程序增加了极大的效力和灵活性.不会强行对值类型进行 ...
- ubuntu下编译安装mysql记录
搞了整整一天,好不容易折腾完,在此记录下,下次就省事了. 去官网http://www.php.net/downloads.php下载所需要的php版本,这里我选择5.6.22. ...
- spring-boot 配置jsp
sring-boot 集成 jsp spring-boot默认使用的页面展示并不是jsp,若想要在项目中使用jsp还需要配置一番. 虽然spring-boot中也默认配置了InternalResou ...
- NGSL + NAWL 单词表 以及学习网站
https://quizlet.com/44769538/nawl-1-1-50-flash-cards/ NAWL 网站 NAWL 单词表 + NGSL 单词表 http://www.newgen ...
- EasyUI Combobox 的 onChange，onSelect，onClick 事件
EasyUI 中 Combobox 选项发生改变时会触发 onChange,onSelect,onClick,3 个事件.最近要做一个级联的 Combo 菜单,类似于选择地址时让用户填写省,市,区的菜 ...
- thymeleaf 模板语言简介
参考网址: https://blog.csdn.net/mlin_123/article/details/51816533 1.1 Thymeleaf 在有网络和无网络的环境下皆可运行,而且完全不需启 ...
- webapplication发布
在vs2010里写的 ASP.NET Web Application 发布步骤: ①:右击Web Application项目可以看到发布,弹出的对话框里选择要发布的路径,路径选择一个容易记住的地址即可 ...
- JFinal常量配置学习笔记
在继承 JFinalConfig 类时,需要 实现 /** * Config constant */ public abstract void configConstant(Constants me) ...
- Oracle数据库基础--建表语法+操作
语法 1.建表 create table 表名( 列名 数据类型, …… ); 2.删除表:drop table 表名; 3.添加列:alter table 表名 add(列名 数据类型); 4.修改 ...
- 爬虫技术-httpClent+jsoup
技术:httpClent+jsoup 任务:利用httpClent爬去网站信息,在利用jsoup解析 方法说明: parseUrl(String url):传入相应的url返回该网页内容,网页必须是h ...