《风尚坐火箭学习vue》-- 第九章：Vue实现购物车-金额计算

前言：前端框架千千万，独有vue占一半

我是风尚，让我们一起坐火箭去学习Vue

 

---

《风尚坐火箭学习vue》-- 第九章：Vue实现金额计算

上章回顾：风尚竟然无言以对0..........................................

---

 风尚竟然无言以对，于是乎开始抄起来了测试题。两遍，害。抄就抄...

“1. 前端常用的框架和库写4个.......”机房里回荡着风尚的碎碎念的声音。。。。

时间一分一秒的过去了，不知道过来多久。。。。

风尚突然站起来说“老头，我抄完了！不对，师傅，我抄完了！”

“这下长记性了吧？小伙子，让你抄并不是为了惩罚你，而是为了让你记住啊，前端这东西记得快忘的也快，得多看多练习多回忆！”老头语重心长的说。

“好的师傅，明白了，感谢师傅教诲！”风尚装模作样的说.

“来吧，接下来，为师再教你一个Vue实例！以后做购物车要用，这个简单，但是要好好学啊！”

风尚点了点头。

---

示例图： 

 第一步：

先引入VueJS，或者cdn

第二步：

引入HTML内容：

<div id="app">
			<h2>vue实现金额计算</h2>
			<p>
				单价：<input v-model="n1" type="text">元
			</p>
			<p>
				件数：<input v-model="n2" type="text">件
			</p>
			<p>运费：{{yun}}元</p>
			<p>总金额：{{n1*n2+yun}}元</p>
		</div>

第三步：

写Vue.JS内容：

var bb=new Vue({
			el:"#app",
			data(){
				return{
					// 单价设n1
					n1:0,
					// 件数设n2
					n2:0,
					// 运费设yun
					yun:10
				}
			}
		})

这样就实现了以上示例图内容，也就是购物车-金额计算功能！

“风尚，看懂听懂了吗？有啥不懂的记得问我！”老头说...