vue-常用指令(v-for)

v-for: 循环遍历
    1、遍历数组
    2、遍历对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<ol>
		    <!--遍历数组-->
			<li v-for="(item,index) in items">
				{{item.text}} -- {{index}}
			</li>
		</ol>
		
		----------------------------------------
		<!--遍历对象-->
		<ul>
			<li v-for="(value,key,index) in obj">
			  {{value}} -- {{key}} -- {{index}}
			</li>
		</ul>
		
		<button v-on:click="appendItem">追加</button>
	</div>
</body>
<script>
   var app = new Vue({
		el: '#app',
		data: {
			items: [
				{text: 'SpringMVC'},
				{text: 'Spring'},
				{text: 'Mybatis'}
			],
			obj: {
				"name": "zhangsan",
				"age": 12,
				"sex": "男"
			}
		},
		methods: {
			appendItem: function() {
				app.items.push({text: 'append new item'})
			}
		}
   });
</script>
</html>
    

  

posted @ 2020-05-09 16:44  scwyfy  阅读(164)  评论(0编辑  收藏  举报