<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue列表渲染</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="radio" checked="checked" name="free" @click="getArticle('all')" />全部
<input type="radio" name="free" @click="getArticle('free')" />免费
<input type="radio" name="free" @click="getArticle('nofree')" />收费
<ul>
<li v-for="article in articles">{{article.title}}</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
// 模拟数据
var allArt = [
{title:'收费的'},
{title:'免费的'},
];
var freeArt = [
{title:'免费的'}
];
var nofreeArt = [
{title:'收费的'}
];
var vm = new Vue({
// el就是挂载实例
el:'#app',
data:{
articles:''
},
// 生命周期函数mounted,调用函数赋值给articles
mounted:function(){
this.getArticle('all')
},
methods:{
getArticle:function(msg){
if(msg=='all'){
this.articles = allArt
}
if(msg=='free'){
this.articles = freeArt
}
if(msg=='nofree'){
this.articles = nofreeArt
}
}
}
})
</script>
vue列表渲染实例
最新推荐文章于 2024-03-31 07:52:06 发布