标签：lis amp 编辑 避免 未成年 color his sharp 大小写
在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}} {{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（）方法
}
}
就这样，我们就完成了对列表的排序
标签：lis amp 编辑 避免 未成年 color his sharp 大小写
原文地址：https://www.cnblogs.com/yang656/p/10121405.html
