1、效果

点击+-修改数量，金额跟着一起变动

2、index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.  
  6.     <meta name="viewport"
  7.           content="width=device-width, user-scalable=no, initial-scale=1.0">
  8.     <title>Title</title>
  9.     <link rel="stylesheet" href="css/index.css">
  10. </head>
  11. <body>
  12. <div id="app">
  13. <!--<h2>{{title}}</h2>-->
  14.     <li v-for="(item,index) in productList">
  15.         <div >产品名称：{{item.productName}}</div>
  16.         <dd v-for="part in item.parts" v-text="part.partsName"></dd>
  17.         <div>价格：{{item.productPrice+"--------------------"+index}}</div>
  18.         <div>数量：{{item.productQuentity}}</div>
  19.         <div>金额：{{item.productPrice*item.productQuentity  | formatMoney}}</div>
  20.         <div>金额：{{item.productPrice*item.productQuentity  | money("元")}}</div>
  21.         <!--<img src="item.productImage" alt="">-->
  22.         <!--<img src="{{item.productImage}}" alt="">-->
  23.         <img v-bind:src="item.productImage" alt="">
  24.  
  25.         <a href="javascript:;" v-on:click="changeMoney(item,-1)">-</a>
  26.         <a href="javascript:;" @click="changeMoney(item,1)">+</a>
  27.         <input type="text" value="0" disabled   v-model="item.productQuentity">
  28.     </li>
  29.  
  30. </div>
  31. <script src="js/lib/vue.min.js"></script>
  32. <script src="js/lib/vue-resource.min.js"></script>
  33. <script src="js/cart.js"></script>
  34. </body>
  35. </html>

3、cart.js

  1. /**
  2.  * Created by kk on 2017/4/16.
  3.  */
  4. new Vue({
  5.     el:"#app",
  6.     data:{
  7.         // title:"hello vue"
  8.         totalMoney:0,
  9.         productList:[]
  10.     },
  11.     filters:{
  12. formatMoney:function (value) {
  13.     return "￥"+value.toFixed(2)
  14. }
  15.     },
  16.     mounted:function () {
  17.         //类似于jquery中的ready方法
  18.         this.$nextTick(function () {
  19.             this.cartView();
  20.         })
  21.  
  22.     },
  23.     methods:{
  24.         cartView:function () {
  25.     // this.title="Vue hello"
  26.             //var _this=this;
  27.             // this.$http.get("data/cart.json",{"id":123}).then(function (res) {
  28.             //     _this.productList=res.body.result. productList;
  29.             //     _this.totalMoney=res.body.result.totalMoney;
  30.             // });
  31. //            ES6语法
  32.             let _this=this;
  33.             this.$http.get("data/cart.json",{"id":123}).then(res=> {
  34.                 this.productList=res.body.result. productList;
  35.             this.totalMoney=res.body.result.totalMoney;
  36.             });
  37. },
  38.         changeMoney:function (product,way) {
  39.             if(way>0)
  40.             {
  41.                 product.productQuentity++;
  42.             }
  43.             else{
  44.                 product.productQuentity--;
  45.                 if(product.productQuentity<1){
  46.                     product.productQuentity=1;
  47.                 }
  48.             }
  49.  
  50.         }
  51.     }
  52.  
  53. });
  54. Vue.filter("money",function (value,type) {
  55.     return "￥"+value.toFixed(2)+type;
  56. });

vue的双向绑定的更多相关文章

  1. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  2. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  3. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  4. 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  5. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  6. vue数据双向绑定

    Vue的双向绑定是通过数据劫持结合发布-订阅者模式实现的,即通过Object.defineProperty监听各个属性的setter,然后通知订阅者属性发生变化,触发相应的回调. 整个过程分为以下几步 ...

  7. 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  8. vue数据双向绑定原理

    vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...

  9. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  10. vue的双向绑定原理解析（vue项目重构二）

    现在的前端框架 如果没有个数据的双向/单向绑定,都不好意思说是一个新的框架,至于为什么需要这个功能,从jq或者原生js开始做项目的前端工作者,应该是深有体会. 以下也是个人对vue的双向绑定原理的一些 ...

随机推荐

  1. (转)Java按指定行数读取文件

    package test import java.io.File; import java.io.FileReader; import java.io.IOException; import java ...

  2. UVa 562 - Dividing coins 均分钱币 【01背包】

    题目链接:https://vjudge.net/contest/103424#problem/E 题目大意: 给你一堆硬币,让你分成两堆,分别给A,B两个人,求两人得到的最小差. 解题思路: 求解两人 ...

  3. 005.Docker存储管理

    一 Docker volume形态 因为Docker 采用 AFUS 分层文件系统时,文件系统的改动都是发生在最上面的容器层,在容器的生命周期内,它是持续的,包括容器在被停止后.但是,当容器被删除后, ...

  4. 《大型分布式网站架构》学习笔记--01SOA

    "学无长幼,达者为先",作者陈康贤通过3年左右时间就能写出如此著作确实令人钦佩,加油,熊二,早日成为一个合格的后端程序员. 基础概念 SOA(Service-Oriented Ar ...

  5. 第01章 准备工作.md

    第1章 准备工作 1.1 本书的内容 本书讲的是利用Python进行数据控制.处理.整理.分析等方面的具体细节和基本要点.我的目标是介绍Python编程和用于数据处理的库和工具环境,掌握这些,可以让你 ...

  6. 通过 DOM

    通过 DOM,您可访问 HTML 文档中的每个节点. 查找并访问节点 你可通过若干种方法来查找您希望操作的元素: 通过使用 getElementById() 和 getElementsByTagNam ...

  7. Alpha冲刺随笔—：第一天

    课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(十天冲刺) 团队名称:葫芦娃队 作业目标:在十天冲刺里对每天的任务进行总结. 随笔汇总:https://www.cnblogs ...

  8. 图解 Java 内存模型

    图解 Java 内存模型 (图片来自于:http://www.cnblogs.com/zhangs1986/p/7903722.html)

  9. LightOJ.1265.Island of Survival(概率)

    题目链接...我找不着了 \(Description\) 岛上有t只老虎,1个人,d只鹿.每天随机有两个动物见面 1.老虎和老虎碰面,两只老虎就会同归于尽: 2.老虎和人碰面或者和鹿碰面,老虎都会吃掉 ...

  10. wtforms源码流程

    未实例化前 1.继承的Form类 # Form(FormMeta("NewBase", (BaseForm,), {}))# Form(NewBase(BaseForm)) cla ...