计算属性computed

最新推荐文章于 2024-09-09 16:49:19 发布

转载最新推荐文章于 2024-09-09 16:49:19 发布 · 77 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Jeely/p/11057208.html

博客展示了Vue中计算属性computed的使用。以任天堂Switch主机价格为例，通过计算属性计算含税价格及折合人民币价格。代码中定义了price数据，在computed里通过函数计算priceInTax和priceChinaRMB的值。

<!DOCTYPE html>
<html lang="zh">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <link href="../css/style.css" rel="stylesheet"> </head>

<body>
<div id="myApp">
    今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            price: 29980
        },
        computed: {
            priceInTax: function(){
                return this.price * 1.08;
            },
            priceChinaRMB: function(){
                return Math.round(this.priceInTax / 16.75);
            },
        },
    });
</script>
</body>

</html>