<!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. Solve Equations HackerRank 扩展欧几里德 && 数学

    https://www.hackerrank.com/contests/infinitum16-firsttimer/challenges/solve-equations 给定一条方程a*x + b* ...

  2. 《从0到1学习Flink》—— Flink Data transformation(转换)

    前言 在第一篇介绍 Flink 的文章 <<从0到1学习Flink>-- Apache Flink 介绍> 中就说过 Flink 程序的结构 Flink 应用程序结构就是如上图 ...

  3. 用CSS控制图片大小显示的方法

    图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定), ...

  4. Jedis使用工具类

    Redis 使用工具类: package com.qlwb.business.common.redis; import org.apache.log4j.Logger; import redis.cl ...

  5. Ini文件格式说明

    http://www.cnblogs.com/CUIT-DX037/ 百度百科介绍:ini 文件是Initialization File的缩写,即初始化文件,是windows的系统配置文件所采用的存储 ...

  6. aspx有"记住我"的登录

    客户端 <form id="form1" runat="server"> <div> 用户名:<input type=" ...

  7. 项目开发bug记录

    项目开发中遇到了一个问题,类中出现未知属性 ‘ $jacocoData ’,准确的来说,实际上在集成测试阶段,系统自动运行测试用例时,抛出来的异常提示信息,但是在开发阶段是不存在的.这个问题是以前没有 ...

  8. 从零开始的全栈工程师——js篇2.6

    函数 Var 是js的关键字,用于声明变量,声明在内存模块完成,定义(=)是在执行模块完成. Var可以在内存模块提前(js代码执行前)完成所以有变量提升这个功能. 因为a没有带var,所以不存在变量 ...

  9. 七、SSR（服务端渲染）

    使用框架的问题 下载Vue.js 执行Vue.js 生成HTML页面(首屏显示,依赖于vue.js的加载) 以前没有前端框架时,用jsp/php在服务器端进行数据的填充,发送给客户端就是已经填充好的数 ...

  10. Get query parameter from url

    URL = { getUrlParams: function ( name, url ) { if (!url) url = window.location.href; name = name.rep ...