computed Option 计算选项

最新推荐文章于 2025-08-21 23:22:44 发布

weixin_30426879

最新推荐文章于 2025-08-21 23:22:44 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jinsuo/p/8483158.html

本文通过一个Vue.js实例展示了如何使用计算属性来处理数据展示问题。具体包括货币格式化显示及列表逆序输出等功能，有助于理解Vue计算属性的高效用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed Option  计算选项</title>
    <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-touch-fullscreen">
     <meta content="telephone=no,email=no" name="format-detection">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <script src="../assets/js/flexible_css.js"></script>
    <script src="../assets/js/flexible.js"></script>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{newPrice}}</p>
    <ul>
        <!-- <li v-for="item in items">{{item.title}}-{{item.date}}</li>   正常循环输出 -->
        <li v-for="item in reverseNews">{{item.title}}-{{item.date}}</li>
    </ul>
</div>
    
</body>
<script type="text/javascript">
    var newsList=[
        {title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},
        {title:'日本第二大准航母服役 外媒：针对中国潜艇',date:'2017/3/12'},
        {title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},
        {title:'起底“最短命副市长”：不到40天落马，全家被查',date:'2017/3/23'},
        
      
    ];
    var app=new Vue({
        el:'#app',
        data:{    
            price:100,
            items:newsList        
        },
        computed:{   //computed 的作用主要是对原数据进行改造输出。
            newPrice:function(){
                return this.price='¥'+this.price+'元';
            },
            reverseNews:function(){
                return this.items.reverse();  //reverse  反转容器内容   不实排序 不打乱顺序
            }
        }
    })
</script>

</html>