老實(shí)說(shuō)key值不能重復(fù)，為什么我測(cè)試的時(shí)候沒(méi)有出問(wèn)題？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/Vue.js" ></script>
</head>
<body>
<div id="div1">
<div v-show="show">
<div>Hello World</div>
</div>
<input type="button" value="toggle" @click="fn"/>
<ul>
<li v-for="item in list" v-bind:key="item">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: "#div1",
data: {
show: true,
list: [1,2,2,4,2,1]
},
methods: {
fn: function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
2019-04-11
v-for中的key
使用
v-for更新已渲染的元素列表時(shí),默認(rèn)用就地復(fù)用策略;列表數(shù)據(jù)修改的時(shí)候,他會(huì)根據(jù)key值去判斷某個(gè)值是否修改,如果修改,則重新渲染這一項(xiàng),否則復(fù)用之前的元素;我們?cè)谑褂玫氖褂媒?jīng)常會(huì)使用
index(即數(shù)組的下標(biāo))來(lái)作為key,但其實(shí)這是不推薦的一種使用方法;2018-12-29
我的key值有幾個(gè)是重復(fù)的，也沒(méi)出錯(cuò)呀？