vue 利用computed对文章列表进行排序

Posted 2021-01-27 yang656

在vue 项目中computed属性是经常用到的，而它的主要作用就是对原数据进行改造输出：包括格式的编辑，大小写的转换，顺序的重排添加符号等等

今天我们就试一下其中的格式编辑和排序功能：

<div id="app">
  <div>{{newPrice}}</div>
</div>

　　

var app = new Vue({{
       el:‘#app‘,
       data(){
              return{
                 price:1
         }
    },
　　computed:{
　　　　newPrice:function(){
　　　　　　return this.price = ‘￥‘+this.price+‘元‘
　　　　}
　　}  
    
})

　这样我们就完成了对数据输出时候的改造，当然，有人可能觉得直接写在页面不就好了嘛，其实我们在工作当中应该避免这样的情况，而应该更多的让代码来实现这些功能。而computed刚好可以为此做出一些功能，而且能不污染我们的原始数据

现在我们试一下对数据列表的处理吧

<ol>
    <li v-for="item in reverseNews">
        {{item.title}}&nbsp; &nbsp;{{item.date}}
    </li>
</ol>

上面我们用for循环出我们的列表

var newList = [{
                title: ‘《必由之路》今天播出第四集《力量之源》‘,
                date: ‘2018/3/10‘
            },
            {
                title: ‘沿着“必由之路”逐梦前行 向着目标奋进‘,
                date: ‘2018/3/12‘
            },
            {
                title: ‘爱这样“进击的中国”  爱这样“拼搏的中国”‘,
                date: ‘2018/3/13‘
            },
            {
                title: ‘外交部：中加双方就加公民被拘捕一事保持正常沟通‘,
                date: ‘2017/7/23‘
            },
            {
                title: ‘中央批准最高检内设机构改革方案 增设未成年人检察机构‘,
                date: ‘2018/12/10‘
            },
            {
                title: ‘美高官称中国在非洲开展腐败商业行为 中方回应‘,
                date: ‘2018/12/14‘
            }
        ]

data() {
   return {
     newList: newList
  }
},

computed:{
　　reverseNews:function(){
　　　　return this.newList.reverse()    //这里我们采用原生javascript的倒序排列  reverse（）方法
　　}
}　　
　　


就这样，我们就完成了对列表的排序