vue列表渲染实例

最新推荐文章于 2024-03-31 07:52:06 发布

俗世凡人行

最新推荐文章于 2024-03-31 07:52:06 发布

阅读量394

点赞数 1

分类专栏： Vue 文章标签：列表渲染

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107591837

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

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