二十一、computed Option 计算选项

最新推荐文章于 2022-09-01 12:33:18 发布

原创最新推荐文章于 2022-09-01 12:33:18 发布 · 580 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#computed

Vue 专栏收录该内容

34 篇文章

订阅专栏

本文深入探讨Vue中的计算属性（computed）功能，展示如何利用计算属性对原始数据进行格式化、大小写转换、顺序调整等操作，提高代码复用性和效率。通过具体示例，如价格格式化显示和新闻列表逆序呈现，阐述计算属性在实际项目中的应用。

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

computed Option 计算选项

computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Computed Option 计算选项</title>
</head>
<body>
    <h1>Computed Option 计算选项</h1>
    <hr>
    <div id="app">
        {{newPrice}}
        <hr>
        <br>
        <ul>
            <li v-for="(news,index) in reverseNews">
                {{index+1}}、{{ news.title}}:{{ news.date  }}
            </li>
        </ul>
    </div>


    <script type="text/javascript">

        var app=new Vue({
            el:'#app',
            data:{
                price:100,
                newsList:[
                    {title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},
                    {title:'日本第二大准航母服役 外媒：针对中国潜艇',date:'2017/3/12'},
                    {title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},
                    {title:'起底“最短命副市长”：不到40天落马，全家被查',date:'2017/3/23'},
                ]
            },
            computed:{
                newPrice:function(){
                    return this.price='￥' + this.price + '元';
                },
                reverseNews:function(){
                    return this.newsList.reverse();
                }
            }
        })
    </script>
</body>
</html>