Alpine.Js - grandTotal
Alpine.Js - grandTotal
提问于 2021-07-15 14:23:28
如何使用alpine.js获取grandTotal
https://codepen.io/zaster/pen/eYWvJMv?editors=1010
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<title>Document</title>
</head>
<body>
<ul x-data="{ rows: ['qty: 0', 'rate: 0', 'total: 0'], grandTotal: 0 }" x-effect="total = qty * rate">
<template x-for="row in rows">
<input x-text="row" type="text" x-model.number="qty" name="qty">
<input x-text="row" type="text" x-model.number="rate" name="rate">
<input x-text="row" type="text" x-model.number="total" name="total">
</template>
<input type="text" x-model.number="grandTotal" name="grandTotal">
</ul>
</body>
</html>回答 1
Stack Overflow用户
发布于 2021-11-23 07:59:34
尝尝这个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<title>Document</title>
</head>
<body>
<ul x-data="{
rows: [
{qty: 1, rate: 0, total: 0},
{qty: 2, rate: 0, total: 0}
],
grandTotal: 0 }">
<template x-for="row in rows">
<li x-effect="
grandTotal -= row.total;
row.total = row.qty * row.rate;
grandTotal += row.total;
">
<input type="text" x-model.number="row.qty" name="qty" />
<input type="text" x-model.number="row.rate" name="rate" />
<span x-text="row.total"></span><br/>
</li>
</template>
<span x-text="grandTotal"></span>
</ul>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68388875
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号