VUE3.x（v-for）循环遍历指令

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="../js/vue.js"></script></head><body>，<div id="app"><ul

月疯

3340人浏览 · 2021-08-15 13:36:38

月疯 · 2021-08-15 13:36:38 发布

<!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="item in arr">{{ item }}</li> -->
				<!-- 获取索引 -->
				<!-- <li v-for="(item,index) in arr">{{ index }} = {{ item }}</li> -->
			    <!-- 循环对象 -->
				<!-- 属性取值 -->
				<!-- <li v-for="item in user">{{ item }}</li> -->
				<!-- 属性的名称 -->
				<!-- <li v-for="(value,key) in user">{{ key }} = {{ value }}</li> -->
			    <!-- 属性序号的索引 -->
				<!-- <li v-for="(value,key,index) in user">{{ index+1 }} = {{ key }} = {{ value }}</li> -->
			    <!-- 循环数字 -->
				<!-- <li v-for="item in num">{{ item }}</li> -->
				<!-- 字符串循环 -->
				<!-- li的唯一标识,可以为每一项提供唯一的标识的一个节点 -->
				<!-- <li v-for="item in str" :key="">{{ item }}</li> -->
				<li v-for="(item,index) in str" :key="index">{{ index }} = {{ item }}</li>
			</ul>
			
		</div>
		<script>
			Vue.createApp({
				data(){
					return {
						arr:['tom','jack','alice','mike'],
						user:{
							id:9527,
							name:"唐伯虎",
							age:25
						},
						num:5,
						str:'hello'
					}
				}
			}).mount("#app")
		</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}$/, //不连续的两位字母// /^