二十一、computed Option 计算选项

r囧r小猫 2022-05-03 09:30 216阅读 0赞

#                     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>