예 7: 화폐 환산 [검색 속성의 함수 가 페이지 에 불 러 올 때 immedirate: true] 을 즉시 실행 합 니 다.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<link rel="stylesheet" type="text/css" href="style/index.css" />
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
	
	<div id="box">
		<p>￥: <input type="number" v-model='CNY'></p>
		=
		<p>$: <input type="number" v-model='dollar'></p>

	</div>

	<script src="js/index.js"></script>
</body>
</html>

// var vm=new Vue({
// 	el:'#box',
// 	data:{
// 		CNY:1,
// 		dollar:1,
// 		rate:7.0119
// 	},
// 	watch:{
// 		CNY:function(newValue){
// 			this.dollar=newValue/this.rate;
// 		},
// 		dollar:{
// 			handler:function(newValue){
// 				this.CNY=newValue*this.rate;
// 			},
// 			immediate:true
// 		}
// 	}
// })

var vm=new Vue({   /*     */
	el:'#box',
	data:{
		CNY:1,
		dollar:1,
		rate:7.0119
	}
})

vm.$watch('CNY',function(newValue){
	this.dollar=newValue/this.rate;
})

vm.$watch('dollar',function(newValue){
	this.CNY=newValue*this.rate;
},{
	immediate:true
})

예 7: 화폐 환산 [검색 속성의 함수 가 페이지 에 불 러 올 때 immedirate: true] 을 즉시 실행 합 니 다.

좋은 웹페이지 즐겨찾기