vue的v-for循环指令

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><script src="js/vue.js"></script&a

dongsdh

2991人浏览 · 2018-04-09 14:42:22

dongsdh · 2018-04-09 14:42:22 发布

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<script src="js/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="container">
			<!-- 将myList中的元素 显示在一个无序列表中-->
			<ul>
				<li>{{myList[0]}}</li>
				<li>{{myList[1]}}</li>
				<li>{{myList[2]}}</li>
				<li>{{myList[3]}}</li>
				<li>{{myList[4]}}</li>
			</ul>
			<!-- Vue提供了一个循环的指令： v-for -->
			<ol type="a">
				<li v-for="tmp in myList">
					{{tmp}}
				</li>
			</ol>
			<!-- v-for第二种语法：可以取到临时变量对应的index-->
			<p v-for="(value,key) in car">
				{{"key is "+key+" value is "+value}}
			</p>

			<p v-for="(value,key) in  myList">
				{{"key is "+key+" value is "+value}}
			</p>
		</div>
		<script>
			new Vue({
				el: '#container',
				data: {
					myList: [100, 200, 300, 400, 500],
					car: {
						brand: 'WEY',
						price: 20
					}
				}
			})
		</script>
	</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^