<!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. C 碎片七 指针

    一.地址和指针 程序在编译过程中,系统会根据变量类型分配一定长度的内存单元.内存区中的每个字节都有一个编号,该内存单元的初始编号就是变量的"地址/指针",该内存单元的长度就是变量的 ...

  2. UPDATE SQL 不同环境执行结果不一样

    背景:1.前台:JQUERY 提交数据 2.后台:OWIN C#  处理接收数据 3.数据库: postgresql ========================================= ...

  3. vuejs 生命周期 updated

    前段时间 公司领导提示出了一个需求就是 像微信朋友圈一样,刷列表 一直刷到 底部或者是半中央,然后点击返回或者是离开一下 页面,再辞进入朋友圈页面依然现实的还是之前滚动的位置. 我现在做的公司贷后系统 ...

  4. php 01

    PHP 一.了解php 1.什么是php PHP 超文本预处理器 服务器端的脚本语言  是一种被广泛应用的开放源代码的多用途脚本语言  他可以嵌入到html中 尤其适用web开发 2.php在web中 ...

  5. Windows 10 取消桌面右键“图像属性”、“图像选项”

    Windows 10 取消桌面右键"图像属性"."图像选项" 桌面右键 说明:在windows 10中,桌面右键出现"图像属性"." ...

  6. C#中描述mssql中DateTime的最小值、最大值

    首先引用System.Data.SqlTypes 最小值:SqlDateTime.MinValue.Value 最大值:SqlDateTime.MaxValue.Value

  7. Myeclipse 突然打不开的问题

    用的好好的Myeclipse今天突然打不开了,打开myeclipse提示 :an error has occurred  see the log file 然后我打开日志文件,看到如下的报错信息: ! ...

  8. mac 查看python安装路径

    1.terminal : input: which Python 2.terminal: input : python  --->import sys  ----> print sys.p ...

  9. 解决Android Studio和Android SDK Manager无法在线更新的问题[转]

    升级时提示 Connection failed. Please check your network connection and try again 修改安装目录下bin\studio.exe.vm ...

  10. 实战：ADFS3.0单点登录系列-集成MVC

    本文将讲解如何让MVC应用程序与ADFS集成,完成认证的过程. 目录: 实战:ADFS3.0单点登录系列-总览 实战:ADFS3.0单点登录系列-前置准备 实战:ADFS3.0单点登录系列-ADFS3 ...