Vue2.0计算属性：
计算属性：通过计算得到一个属性，避免v-if和v-for出现在同一个标签上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<!-- 不是拿到数据才渲染，数组存在就会渲染 -->
<li v-if="news[0]">{{news[0].title}}</li>
</div>
<ul>
<li v-for="item,index in news" v-if="index>0">{{item.title}}</li>
</ul>
<div>
<li>{{firstNews.title}}</li>
</div>
<ul>
<li v-for="item in partNews">{{item.title}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
news:[]
},
mounted() {
this.news=[
{id:'1',title:'标题1'},
{id:'2',title:'标题2'},
{id:'3',title:'标题3'},
{id:'4',title:'标题4'},
{id:'5',title:'标题5'},
{id:'6',title:'标题6'}
]
},
// 计算属性：通过计算得到一个属性，避免v-if和v-for出现在同一个标签上
computed:{
firstNews(){
return this.news.length?this.news[0]:{};
},
partNews(){
return this.news.filter((item,index)=>{
return index>0;
});
}
}
})
</script>
</body>
</html>
标签：title,标题,计算,news,id,Vue2.0,属性 From： https://www.cnblogs.com/njhwy/p/18545466