为了账号安全,请及时绑定邮箱和手机立即绑定

老实说key值不能重复,为什么我测试的时候没有出问题?

<!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>


正在回答

2 回答

v-for中的key

使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;
我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;

0 回复 有任何疑惑可以回复我~

我的key值有几个是重复的,也没出错呀?https://img1.sycdn.imooc.com//5c2706780001302d01690287.jpg

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

老实说key值不能重复,为什么我测试的时候没有出问题?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信