前端学习——VUE列表渲染

一 v-for

1.1 数组

第一个元素为数组成员，第二个元素为数组下标

	<li v-for="a1,a2 in items" :key="index">
		{
  {a2}}.{
  { a1 }}
	</li>

	el : "#app",
	data : {
   
		items : [
			"内容一",
			"内容二"
		]
	}

1.2 对象

声明的第一个为对象值，第二个为对象key，第三个对象为索引

		<li v-for="value, key, index in object">
			{
  {index}} - {
  {key}} : {
  { value }}
		</li>

	el : "#app",
	data : {
   
		object: {
   
			title: 'How to do lists in Vue',
			author: 'Jane Doe',
			publishedAt: '2016-04-10'
		}
	}

1.3 维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。<p v-for="value,key,index in object" :key=key>
key必须是唯一的，不可以重复。参考问题。

    <div id="app">
        <form>
            <fieldset>
                <p v-for=