vue.js循环

最新推荐文章于 2024-07-14 07:56:48 发布

曹振华

最新推荐文章于 2024-07-14 07:56:48 发布

阅读量395

点赞数

分类专栏： vue.js 文章标签： vue 循环

本文链接：https://blog.csdn.net/chadcao/article/details/102171281

版权

vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1）代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="vue.min.js"></script>
	</head>
	<body>
	<div id="vm">
		<!-- 集合长度大于0，循环集合，自定义方法过滤 -->
		<ul v-if="students.length>0">
			<li v-for="(item,index) in myFilter(students)" v-bind:id="item.id" v-bind:key="item.id">
				{{index}}-{{item.id}}-{{item.name}}
			</li>
		</ul>
		<ul>
			<!-- 循环组件 -->
			<my-student v-for="(item,index) in students" v-bind:student="item" v-bind:index="index">
			</my-student>
		</ul>
		<ul>
			<!-- 循环整数，用v-if过滤 -->
			<li v-for="n in 10" v-if="n%2==0">{{n}}</li>
		</ul>
		<ul>
			<!-- 循环对象属性 -->
			<li v-for="(item,name,index) in student">{{index}}-{{name}}-{{item}}</li>
		</ul>
		<div>
			<button v-on:click="mySplice();">splice</button>
		</div>
	</div>
	</body>
	<script type="text/javascript">
		Vue.component('my-student', {
			template: '<li>{{index}}-{{student.id}}-{{student.name}}</li>',
			props: ['student', 'index']
		});
		var vm = new Vue({
			el: '#vm',
			data: {
				students: [{
						id: 1,
						name: '张三'
					},
					{
						id: 2,
						name: '李四'
					},
					{
						id: 3,
						name: '王五'
					},
					{
						id: 4,
						name: '马六'
					},
					{
						id: 5,
						name: '赵七'
					},
					{
						id: 6,
						name: '曹八'
					}
				],
				student: {
					name: '小明',
					address: '江苏苏州',
					gender: '男',

				}
			},
			methods: {
				myFilter: function(students) { /* 自定义方法过滤 */
					return students.filter(function(item) {
						return item.id % 2 == 0;
					});
				},
				mySplice: function() { /* 更新对象集合 */
					var newModel = {
						id: '2',
						name: '李明'
					};
					var index = getIndex(newModel, vm.students);
					if (index != -1) {
						vm.students.splice(index, 1, newModel);
					}
				}
			}
		});
		/* 获取学生在集合中的索引 */
		function getIndex(student, students) {
			var index = -1;
			$.each(students, function(i, item) {
				if (student.id == item.id) {
					index = i;
					return false;
				}
			});
			return index;
		}
	</script>
</html>

2）结果