1、效果图
2、功能说明:输入单价和件数点击其他地方输出总金额
3、代码(vue.js的引入地址目录记得改~~)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>金额计算</title>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<style type="text/css">
#app{
width: 300px;
height: 200px;
margin: auto;
text-align: center;
padding: 5px 15px;
background-color: #e6e7ff;
}
h1{
text-align: center;
}
input{
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="app">
<h1>金额计算</h1>
<!-- number转换为数字 -->
<!-- @change 当内容改变时执行函数 -->
单价:<input type="text" v-model.number="n1" @change="calc()">元<br/>
件数:<input type="text" v-model.number="n2" @change="calc()">件<br/>
运费:<span>10</span>元<br>
总金额:<span>{{sum}}</span>元
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
n1:0,//单价
n2:0,//件数
sum:0,//总金额
},
methods:{
calc(){//计算并赋值给sum
this.sum = this.n1*this.n2+10;
},
},
})
</script>
</body>
</html>