第五天Vue学习

v-for的相关使用

1.v-for的基本使用

循环遍历，值，索引值，key都可以

 一般需要使用索引值。<li v-for="(item,index) in names" >{ {index+":"+item}}</li>index表示索引，item表示当前遍历的元素。

<div id="app">
			<p v-for="(item,index) in books">{
  {item}}</p>
			<p v-for="(i,key,index) in person">{
  {key+'----'+i}}</p>
		</div>
		<script src="vue.js"></script>
		<script type="text/javascript">
			
			var app = new Vue({
				el:'#app',
				data:{
					books:['化学','物理','英语','数学','语文'],
					person:{
						name:'张三',
						age:22,
						sex:'男'
					}
				},
				methods:{
					
				}	
			})
		</script>

2.v-for对key的使用

使用key可以提高效率，加key如果要插入x使用diff算法高效,如果使用index做key一直变，所以item如果唯一可以使用item。

不加key渲染时候会依次替换渲染，加了key会直接将其放在指定位置，加key提升效率。

没有key的添加就相当于直接在当前位置改变添加的字符串后，后面的所有元素都会一个一个的改变，下面的数据都会变。而不是利用vue的复用性直接调用，，这样会对运行效率有影响

<div id="app">
			<p v-for="item in letters">{
  {item}}</p>
			<input type="button" name="" id="" value="没有key添加"  @click="btn()"/>
		</div>
		<script src="vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				
				el:'#app',
				data:{
					letters:['a','b','c','d','e']
				},
				methods:{
					btn(){
						return this.letters.splice(1,0,'x')
					}
				}
			})
		</script>

3.v-for循环的key的原理

以此为案例，当文本框内写入内容后，在进行点击添加会是文本框内部的内容发生错乱

所以需要加入key来解决相关问题

不添加key的结果，value中的内容收到影响，若是从尾部添加没有问题 即便添加了:key="index"也不行，这个没有根本解决key的问题 ，也可以说因为复用性，所以在替换时index没有唯一性，索引值被直接改变，后面带有的value会直接复用，导致添加的新的文本框内容与开始的第一行一致。

<div id="app">
			<ul>
				<li v-for="(item,index) in title" :key="item.id">{
  {item.name}} <input type="text" ></li>
			</ul>
			<button @click="add">添加</button>
		</div>
		<script src="vue.js"></script>
		<script type="text/javascript">
			
			var app = new Vue({
				el:'#app',
				data:{
					list:{id:5,name:'赵六'},
					title: [{