摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>兩個(gè)整數(shù)相加，雙向綁定</title> <script type="text/javascript" src=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兩個(gè)整數(shù)相加，雙向綁定</title>
<script type="text/javascript" src="Vue.js"></script>
<style type="text/css">
input{
display: inline-block;
width: 50px;text-indent: 0.2em;
}
</style>
</head>
<body>
<!-- 在當(dāng)前頁(yè)面中創(chuàng)建一個(gè)掛載點(diǎn) -->
<div id="box">
計(jì)算兩數(shù)的和：
<input type="text" v-model="num">
<span>+</span>
<input type="text" v-model="nums">
= <span>{{sum}}</span>
</div>
<script type="text/javascript">
// 創(chuàng)建Vue的實(shí)例
new Vue({
// 第一個(gè)屬性綁定一個(gè)掛載點(diǎn)
el:'#box', //用ID選定
// 創(chuàng)建了一個(gè)數(shù)據(jù)模型
data:{
num:0,
nums:0,
sum:0,
},
// watch 監(jiān)聽(tīng)器屬性，監(jiān)聽(tīng)頁(yè)面中變量值的變化
watch:{
num:function() {
this.sum = parseFloat(this.num) + parseFloat(this.nums);
},
nums:function(){
this.sum = parseFloat(this.nums) + parseFloat(this.num);
}
}
});
</script>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-04-01 09:52:12
老師總結(jié)：vue等前端開(kāi)框架的強(qiáng)大之處, 就是重新定義了前端, 讓前端開(kāi)發(fā)更智能, 也更方便, 例如本例的偵聽(tīng)數(shù)據(jù)變化功能, 之前需要上百行代碼,現(xiàn)在只需要幾行就可以輕松搞定