vue的双向绑定
1、效果
点击+-修改数量，金额跟着一起变动
2、index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>Titletitle>
<link rel="stylesheet" href="css/index.css">
head>
<body>
<div id="app">
<li v-for="(item,index) in productList">
<div >产品名称：{{item.productName}}div>
<dd v-for="part in item.parts" v-text="part.partsName">dd>
<div>价格：{{item.productPrice+"--------------------"+index}}div>
<div>数量：{{item.productQuentity}}div>
<div>金额：{{item.productPrice*item.productQuentity | formatMoney}}div>
<div>金额：{{item.productPrice*item.productQuentity | money("元")}}div>
<img v-bind:src="item.productImage" alt="">
<a href="javascript:;" v-on:click="changeMoney(item,-1)">-a>
<a href="javascript:;" @click="changeMoney(item,1)">+a>
<input type="text" value="0" disabled v-model="item.productQuentity">
li>
div>
<script src="js/lib/vue.min.js">script>
<script src="js/lib/vue-resource.min.js">script>
<script src="js/cart.js">script>
body>
html>
3、cart.js
/** * Created by kk on 2017/4/16. */ new Vue({ el:"#app", data:{ // title:"hello vue" totalMoney:0, productList:[] }, filters:{ formatMoney:function (value) { return "￥"+value.toFixed(2) } }, mounted:function () { //类似于jquery中的ready方法 this.$nextTick(function () { this.cartView(); }) }, methods:{ cartView:function () { // this.title="Vue hello" //var _this=this; // this.$http.get("data/cart.json",{"id":123}).then(function (res) { // _this.productList=res.body.result. productList; // _this.totalMoney=res.body.result.totalMoney; // }); // ES6语法 let _this=this; this.$http.get("data/cart.json",{"id":123}).then(res=> { this.productList=res.body.result. productList; this.totalMoney=res.body.result.totalMoney; }); }, changeMoney:function (product,way) { if(way>0) { product.productQuentity++; } else{ product.productQuentity--; if(product.productQuentity<1){ product.productQuentity=1; } } } } }); Vue.filter("money",function (value,type) { return "￥"+value.toFixed(2)+type; });