2.6 vue列表使用 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="app">
		<ul>
			<li v-for="color in colors">{{color}}</li>
			<hr>

			<li v-for="(wang, index) in wangs">{{wang.name}}的年龄是：{{wang.age}}，索引值为：{{index}}</li>
			<hr>

			<li v-for="(value, key, index) in kaivon">属性值为：{{value}}，属性名为：{{key}}，索引值为：{{index}}</li>
			<hr>

			<li v-for="n in 10">{{n}}</li>
			<hr>

			<!-- <li v-for="wang in adult" v-if="wang.age>=18">{{wang.name}}成人了</li> -->
			<li v-for="wang in adult">{{wang.name}}成人了</li>
		</ul>
	</div>
	<script>
		const arr = ['html', 'css', 'js'];
		console.log(arr);

		const vm = new Vue({
			el: '#app',
			data: {
				colors: ['red', 'green', 'blue'],
				wangs: [
					{ name: '老王', age: 40 },
					{ name: '大王', age: 30 },
					{ name: '小王', age: 16 },
				],
				//adult:[],
				kaivon:{
					name:'陈学辉',
					age:18,
					height:'180CM',
					trait:"帅",
				}
			},
			computed:{
				adult(){
					return this.wangs.filter(item => item.age>=18);
				}
			}
		});

	</script>
</body>

</html>

　　

posted @ 2021-12-21 15:30  JavaShop  阅读(42)  评论(0)    收藏  举报