Cette fois, je vous propose AngularJS pour implémenter la fonction de calcul de prix. Quelles sont les précautions pour AngularJS pour implémenter la fonction de calcul de prix. . Jetons un coup d'oeil.
Le code est le suivant :
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>www.jb51.net angular计算总价</title>
<link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" >
<script type="text/javascript" src="../libs/angular.min.js"></script>
</head>
<body>
<table>
<tr><td>单价:</td><td><input type="text" ng-model="price"></td></tr>
<tr><td>数量:</td><td><input type="text" ng-model="number"></td></tr>
<tr><td>总价:</td><td>{{price*number|currency:'￥'}}</td></tr>
</table>
</body>
</html>Il y a quelques points à noter :
<script type="text/javascript" src="../libs/angular.min.js"></script> Introduction du script angulaire js ; <html lang="en" ng-app> Déclaration de ng-app ;
ng-model ="price"<input type="text" ng-model="price">/ng-model="number"Zone de saisie de l'attribut; Après avoir obtenu les données de l'entrée, {{ L'opération dans }} affiche le résultat dans td. Parmi eux,
| monnaie :'￥'<td>{{price*number|currency:'￥'}} est le filtre , qui peut formater les nombres en devise. S'il n'est pas spécifié, la valeur par défaut est $. Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment vue-cli configure l'adaptation mobile lib-flexible+remvue-cli Explication détaillée d'utilisationCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
