<!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. 设置checkbox只读

    1.checkbox没有readonly属性,所以在checkbox添加readonly属性是没有作用的. <input type="checkbox" readonly=& ...

  2. Spring cloud微服务 Hystrix熔断器学习教程

    以下demo代码:https://github.com/wades2/HystrixtDemo 官网定义:Hystrix是一个延迟容错库.在分布式环境中,许多服务依赖项中的一些不可避免地会失败.Hys ...

  3. python的变量命名及其使用

    以下内容皆从书本自学 ,归纳. 1. 变量名只能包含字母.数字和下划线.变量名可以字母或下划线打头,但不能以数字打头,例如,可将变量命名为message_1,但不能将其命名为1_message. 2. ...

  4. Spring Data JPA 事务

    Spring Data JPA 是 Spring 基于 ORM 框架.JPA 规范的基础上封装的一套 JPA 应用框架,可使开发者用极简的代码即可实现对数据的访问和操作.它提供了包括增删改查等在内的常 ...

  5. 基于 MUI 构建一个具有 90 +页面的APP应用

    前言 mui是一款接近原生App体验的前端框架,只需要掌握前端技术就可以开发APP应用,官方有提供功能比较全面的demo版本, 但在实战中总会遇到一些不可避免但坑,对于没有接触过mui的开发者,难免会 ...

  6. vim基本操作思维导图

  7. three.js学习笔记--基础知识

    基础知识 从去年开始就在计划中的three.js终于开始了 历史介绍 (摘自ijunfan1994的转载,感谢作者) OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于Op ...

  8. 云集微助手安装教程和授权说明old

    安装教程 一 .手机越狱(如果已经越狱请跳过此步,直接进行第二步) 越狱教程:http://jailbreak.25pp.com/yueyu/ 二 .安装触动精灵(如果你已安装触动精灵最新版请跳过此步 ...

  9. uLua学习之HelloWorld（一）

    前言 好久都没有写过文章了,现在正好在看有关unity3d的热更新方案,在网上找了很久,发现了ulua这个插件,感觉还是不错的,反正自己是个初学者,多了解一些知识应该是没有什么问题的.说起ulua,就 ...

  10. 在unbuntu 1204（32位）下安装hadoop2.2.0的一些问题

    虽然在网上可以找到很多这样的step by step的教程,但是我还是遇到了很多问题.趁着一点记忆,将这些问题记录下来.安装过程参考了以下博客: http://www.cnblogs.com/life ...