前言:前端框架千千万,独有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
}
}
})
这样就实现了以上示例图内容,也就是购物车-金额计算功能!
“风尚,看懂听懂了吗?有啥不懂的记得问我!”老头说...