<!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又会重新计算-->

    <table border="1" width="90%">

        <tr>

            <th>商品名称</th><th>商品价格</th><th>商品数量</th><th>合计</th>

        </tr>

        <tr v-for="(v,k) in goods">

            <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>

    总计:{{totalPrice}}元

</div>

<script type="text/x-template" id="hdNews">

</script>

<script>

    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_2.VUE学习之--不使用组件computed计算属性超简单的实现美团购物车原理的更多相关文章

  1. 43.VUE学习之--组件之使用.sync修饰符与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学习笔记【31】——Vue路由（computed计算属性的使用）

    computed计算属性的使用 默认只有getter的计算属性:  <div id="app">    <input type="text" ...

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

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

  5. vue学习笔记（六）— 关于Vuex可以这样简单理解

    关于Vuex可以这样简单理解 作者:狐狸家的鱼 本文链接:关于Vuex GitHub:sueRimn 概念理解 和大多数文章都一样,从概念解释到引出问题再举例解决问题. 官网中,Vuex是状态管理模式 ...

  6. vue computed计算属性 watch监听

    计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...

  7. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  8. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  9. Vue（七）：computed计算属性

    简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...

随机推荐

  1. 详解HBase架构原理

    一.什么是HBase           HBase是一个高可靠.高性能.面向列.可伸缩的分布式存储系统,利用HBase技术可在廉价的PC Server上搭建大规模结构化存储集群.         H ...

  2. spring-boot学习之属性配置

    通过@value注解,将配置文件中的内容引入

  3. Android自定义控件练手——波浪效果

    这一次要绘制出波浪效果,也是小白的我第一次还望轻喷.首先当然是展示效果图啦: 一.首先来说说实现思路. 想到波浪效果,当然我第一反应是用正余弦波来设计啦(也能通过贝塞尔曲线,这里我不提及这个方法但是在 ...

  4. vue-cli -- > 项目基本构建的方法

    本文档目的在于让对vue了解比较少的同学,能够快速搭建属于自己的vue项目.(window) 一.构建项目的前提条件 1.确保本机安装了node.js ^6 --> javascript 的服务 ...

  5. php程序员发展建议

    2017PHP程序员的进阶之路 又是一年毕业季,可能会有好多毕业生即将进入开发这个圈子,踏上码农这个不归路.根据这些年在开发圈子总结的LNMP程序猿发展轨迹,结合个人经验体会,总结出很多程序员对未来的 ...

  6. jquery对radio的操作汇总

    1.JQuery控制radio选中和不选中 通过name $("input:radio[name="analyfsftype"]").eq(0).attr(&q ...

  7. 笨办法学Python（二十四）

    习题 24: 更多练习 你离这本书第一部分的结尾已经不远了,你应该已经具备了足够的 Python 基础知识,可以继续学习一些编程的原理了,但你应该做更多的练习.这个练习的内容比较长,它的目的是锻炼你的 ...

  8. String Painter, Chengdu 2008, LA4394

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...

  9. 119. Pascal's Triangle II (Amazon) from leetcode

    Given a non-negative index k where k ≤ 33, return the kth index row of the Pascal's triangle. Note t ...

  10. Jmeter入门4 添加断言 判断响应数据是否符合预期

    发出请求之后,通过添加断言可以判断响应数据是否是我们的预期结果. 1 在Jmeter中发送一个登录的http请求(参数故意输入错误).结果肯定是登陆失败啦. 但结果树中http请求的图标显示‘绿色’表 ...