v-for循环中 key 属性的使用

使用到的方法

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

key属性使用重点

1.v-for 循环的时候， key 属性只能使用 number 获取 string
2.key 在使用的时候必须使用 v-bind 属性绑定的形式，指定 key 的值
3.在组件中，使用 v-for 循环的时候，或者在一套特殊情况中，如果 v-for 有问题，必须在使用 v-for 的时候指定唯一的字符串/数字类型 :key 值

总代码

<!DOCTYPE html>
<head><title>vue v-for循环中 key 属性的使用</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="app1"><div><label for="">ID:<input type="text" v-model="id"></label><label for="">NAME:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><!--  v-for 循环的时候， key 属性只能使用 number 获取 string  --><!--  key 在使用的时候必须使用 v-bind 属性绑定的形式，指定 key 的值 --><!--  在组件中，使用 v-for 循环的时候，或者在一套特殊情况中，如果 v-for 有问题，必须在使用 v-for 的时候指定唯一的字符串/数字类型 :key 值 --><p v-for="item in list" :key="item"><input type="checkbox" name="" id="">{{item.id}}---{{item.name}}</p></div><script>var vm = new Vue({el: "#app1",data: {list: [{id:1, name:'香蕉'},{id:2, name:'芭拉'},{id:3, name:'苹果'},{id:4, name:'榴莲'},{id:5, name:'葡萄'},]},methods: {add(){//添加方法//this.list.push({ id:this.id,name:this.name })//在后方添加this.list.unshift({ id:this.id,name:this.name })//在前方添加}}})</script>
</body>

Vue v-for循环中 key 属性的使用相关推荐

Vue指令之v-for——迭代数组、迭代对象中的属性、迭代数字||v-for循环中key属性的使用
v-for循环普通数组 v-for循环对象数组 v-for循环对象 v-for迭代数字 v-for循环中key属性的使用 <!DOCTYPE html> <html lang=&qu ...
[vue] v-for循环中key有什么作用？
[vue] v-for循环中key有什么作用? 四个字: 性能优化,简述: 让vue在更新数据的时候可以更有针对性的个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢 ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
Vue中key属性的作用
Vue中key属性的作用在列表渲染时使用key属性使用key属性强制替换元素在列表渲染时使用key属性相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候,如果不使用 ...
vue基础小节 v-mode属性双向绑定跑马灯十秒挑战计算器 v-for和key属性 v-if与v-show用法区别 tap切换
vue代码基本结构 <div class="app"><div>{{mge}} ...
Vue router-view key属性解释
Vue router-view key 属性解释 router-view作用,你可以把router-view当做是一个容器,它渲染的组件是你使用vue-router指定的. <template& ...
Vue 模板语法插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例
1 插值操作 1.1 Mustache语法也就是双大括号 {{ }} <div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写 ...
v-for中为什么要有key属性
v-for中为什么要有key属性??? 这是听一个视频中讲的,之前一直不太明白key是干嘛用的当vue中使用v-for正在更新已经渲染过的元素序列时,它默认用"就地复用"策略,如 ...
html页面如何循环遍历,遍历foreach循环中的HTML DOM元素
5 个答案: 答案 0 :(得分:3) 您可以使用closest('tr')查找最近的父tr元素,然后使用index()获取行号.试试这个: $('td').click(function() { va ...

Vue v-for循环中 key 属性的使用

v-for循环中 key 属性的使用

使用到的方法

key属性使用重点

总代码

Vue v-for循环中 key 属性的使用相关推荐

最新文章

热门文章