v-model和计算属性和reduce() 方法

 1.v-model

数据双向绑定：数据渲染到页面【单向】 + 页面更改数据更新【单向】

data中的属性和页面中能输入和修改的标签进行绑定，通过v-model，这样输入框中的数据【页面发生改变】发生变化，data属性值发生改变

v-model可以绑https://cn.vuejs.org/v2/guide/forms.html定的页面标签：input、textarea、select和自定义组件【components】

表单输入绑定 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/forms.html 代码示例：

    
    
    



    

        
        获取数据
        

    

    

2.计算属性

计算属性和侦听器 — Vue.jshttps://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7示例如下：

    
    
    





    
总价：{{getPrice}}元

3.reduce（）方法

 语法： array.reduce(callback,起始位置); 参数一：callback【回调函数】 参数二：起始位置 s:如果reduce的起始位置指定为0，那么s保存的就是0， 当获取第二个数据的时候，s当前保存的是第一次数据的总和 o:当前数据 

Array.prototype.reduce() - JavaScript | MDNreduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce实例如下：

    
    
    





    
总价：{{array.reduce((s,o)=>{return s + o.price * o.num},0)}}元