이번에는 angularjs를 사용하여 쇼핑 금액 계산 도구를 만드는 방법과Angularjs를 사용하여 쇼핑 금액 계산 도구를 만드는 방법에 대한 주의사항
은 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. 바라보다. 장바구니 금액을 계산하기 위해 js나 jquery를 사용할 때 매우 번거로울 것입니다. 오늘은 장바구니 총액을 계산하기 위해 새로운 방법인angularjs를 사용합니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title> angular购物金额计算器</title>
</head>
<body ng-controller="sum">
价格:<input type="text" ng-model="cup.price">
<br/><br/>
数量:<input type="text" ng-model="cup.count">
<p>运费:{{cup.fee|currency:"¥"}}</p>
<p>总金额:{{all()|currency:"¥"}}</p><!-- 过滤器currency -->
</body>
<script src="angular.min.js"></script>
<script>
// 购物金额计算
function sum($scope){
$scope.cup={
"price":12,
"count":1,
"fee":20
}
$scope.all=function(){
return $scope.cup.price*$scope.cup.count;
}
// $watch
// 监听变化
// 有三个参数
// 1.函数或属性
// 2.callback
// 3.true深度监听
$scope.$watch("all()",function(nval, oval){
//console.log(nval+":"+oval);
if(nval<100){
$scope.cup.fee=20;
}
else{
$scope.cup.fee=0;
}
},true)
$scope.$watch("cup.count",function(nval, oval){
//console.log(nval+":"+oval);
if(nval<1){
$scope.cup.fee=0;
}
},true)
}
</script>
<script>
</script>
</html>webstorm을 사용하여 *.vue 파일을 추가하는 방법
mpvue에서 만든 미니 프로그램에 마크다운을 적용하는 방법
vue.js를 사용하여 레시피 편집을 만드는 방법 기능
위 내용은 Anglejs를 사용하여 쇼핑 금액 계산 도구를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
