019——VUE中v-for与computer结合功能实例讲解

最新推荐文章于 2024-09-25 17:15:35 发布

weixin_33690367

最新推荐文章于 2024-09-25 17:15:35 发布

阅读量687

点赞数

文章标签： javascript ViewUI

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>v-for与computer结合功能实例讲解</title>
		<script src="vue.js"></script>
	</head>

	<body>
		<div id="lantian">
			<li v-for="v in stus">
				{{v.name}}--{{v.sex}}
			</li>
			{{type}}
			<input type="radio" v-model="type" value="girl" />女孩
			<input type="radio" v-model="type" value="boy" />男孩
		</div>

		<script>
			var app = new Vue({
				el: '#lantian',
				computed: {
					stus() {
						if(this.type == 'all') {
							return this.user;
						} else {
							return this.user.filter((v) => {
								return v.sex == this.type;
							});
						}
					}
				},
				data: {
					type: 'all',
					user: [{
							name: '小王',
							sex: 'boy'
						},
						{
							name: '小明',
							sex: 'boy'
						},
						{
							name: '小李',
							sex: 'girl'
						},
						{
							name: '小梅',
							sex: 'girl'
						}
					]
				}
			});
		</script>
	</body>

</html>

关注博主即可阅读全文