<!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计算属性超简单的实现美团购物车原理的更多相关文章

  1. 43_2.VUE学习之--不使用组件computed计算属性超简单的实现美团购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue组件双向绑定.sync修饰符的一个坑

    我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...

  4. 小白学习vue第三天，从入门到精通（computed计算属性）

    computed计算属性 <body> <div id="app"> <div>{{myName}}</div> </div& ...

  5. vue组件中的.sync修饰符使用

    在vue的组件通信props中,一般情况下,数据都是单向的,子组件不会更改父组件的值,那么vue提供.sync作为双向传递的关键字,实现了父组件的变动会传递给子组件,而子组件的carts改变时,通过事 ...

  6. Vue学习笔记【13】——键盘修饰符以及自定义键盘修饰符

    1.x版本中自定义键盘修饰符[了解] Vue.directive('on').keyCodes.f2 = 113; 2.x版本中自定义键盘修饰符 通过Vue.config.keyCodes.名称 = ...

  7. Vue学习笔记【6】——事件修饰符

    .stop 阻止冒泡(阻止事件向外层冒泡) .prevent 阻止默认事件(链接跳转.表单提交) .capture 添加事件侦听器时使用事件捕获模式(从外到里触发事件) .self 只当事件在该元素本 ...

  8. vue学习之组件

    组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...

  9. Vue学习之组件切换及父子组件小结（八）

    一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...

随机推荐

  1. OpenStack创建实例错误解决方法

    实例执行所请求操作失败,实例处于错误状态.: 请稍后再试 [错误: Build of instance beaeb5e0-26eb-4044-ae14-bb87d509886d aborted: Fa ...

  2. CentOS6.x之emacs安装配置编译

    刚开始学习linux,干学没什么意思,想在linux下写写程序,了解到linux下使用较多的是emacs和vim,在youtobe上分别看了看这两个工具进行开发的视频,个人感觉emacs比较酷一点,所 ...

  3. SpringBoot | 第三十七章：集成Jasypt实现配置项加密

    前言 近期在进行项目安全方面评审时,质量管理部门有提出需要对配置文件中的敏高文件进行加密处理,避免了信息泄露问题.想想前段时间某公司上传github时,把相应的生产数据库明文密码也一并上传了,导致了相 ...

  4. SpringBoot | 第二章：lombok介绍及简单使用

    在去北京培训的时候,讲师说到了lombok这个第三方插件包,使用了之后发现,确实是个神奇,避免了编写很多臃肿的且定式的代码,虽然现代的IDE都能通过快捷键或者右键的方式,使用Generate Gett ...

  5. Dos窗口一闪而过，如何查看错误？

    问:Dos窗口一闪而过,如何查看错误? 答:在执行程序最后追加pause或者read(,),即可查看错误信息.

  6. sql 删除字段 出错

    1. 删除字段:   ALTER TABLE TALE_NAME DROP COLUMN nn;   2.报错: 消息 5074,级别 16,状态 1,第 1 行对象'DF__WorkOrder__I ...

  7. 从零开始的全栈工程师——html篇1.6

    浮动与伪类选择器 一.浮动(float) 1.标准文档流 标准文档流是一种默认的状态 浏览器的排版是根据元素的特征(块和行级) 从上往下 从左往右排版 这就是标准文档流 2.浮动(float)floa ...

  8. JAVA中日期格式转换各个字母代表含义

    G  Era 标志符  Text  AD  y  年  Year  1996; 96  M  年中的月份  Month  July; Jul; 07  w  年中的周数  Number  27  W  ...

  9. 零基础逆向工程28_Win32_02_事件_消息_消息处理函数

    1 第一个图形界面程序 步骤1:创建Windows应用程序 选择空项目 步骤2:在新建项窗口中选C++代码文件 创建一个新的cpp文件 步骤3:在新的cpp文件中添加:#include <Win ...

  10. WPF中的拖放1

    实现了WPF的不同层级间的元素之间的拖放,例子虽小却很经典,引申一下也许可以实现类VS界面的浮动依靠面板. 拖放前: 拖放后: 代码如下: <Window x:Class="WpfAp ...