vue之列表渲染v

2023-04-10 12:52| 来源: 网络整理| 查看: 265

目录简介用法v-for可循环的几种变量的展示数组的循环展示对象的循环展示字符串的循环展示数字的循环展示v-for搭档key值的说明js循环几种方式基于索引的循环数组的循环数组基于索引的循环数组基于迭代的循环基于of的循环数组的方法循环jQuery的循环点击按钮隐藏/显示列表示例

简介

v-for可循环对象：数组，对象，字符串，数字

用法需要哪个标签循环，就把v-for写到哪个标签上 v-for="xxx in 变量" 这里的xxx in是固定写法，xxx代表一个变量，比如后端的 for i in中的i字母 v-for可循环的几种变量的展示

使用v-for循环“数组，对象，字符串，数字”的方式

数组的循环展示 body: 数组的循环 {{i}} 带索引的数组循环如果要打印索引，需要把索引变量放后面，如果有多个变量就使用括号括起来，如下：索引{{index}}的数字是：{{i}} script: new Vue({ el: '#app', data: { l1: [1, 2, 3], d1: {name: 'jack', age: 18}, s1: 'hello world', n1: 5 }, })

显示结果：

对象的循环展示 body: 对象的循环默认打印value值，不打印key值 {{i}} 对象带kv的循环 key变量放后面，value变量放前面 key是：{{key}}，value是：{{i}} script: new Vue({ el: '#app', data: { l1: [1, 2, 3], d1: {name: 'jack', age: 18}, s1: 'hello world', n1: 5 }, })

字符串的循环展示 body: 字符串的循环 {{i}} 字符串的循环，带索引索引{{index}}的字符是{{i}} script: new Vue({ el: '#app', data: { l1: [1, 2, 3], d1: {name: 'jack', age: 18}, s1: 'hello world', n1: 5 }, })

数字的循环展示 body: 循环数字 n1变量是5,相当于python的for i in range(5) {{i}} 循环数字，带索引索引{{index}}的数字{{i}} script: new Vue({ el: '#app', data: { l1: [1, 2, 3], d1: {name: 'jack', age: 18}, s1: 'hello world', n1: 5 }, })

v-for搭档key值的说明

v-for在使用时，一般会在循环的标签上增加一个 :key="xxx" 的属性，它的作用是加速虚拟dom的替换。

// 假如有一个列表 l1=[1,2,3] 显示

上面的代码未使用key属性，说明如下：此时页面渲染出三个div标签来，但如果我们增加了一个值，比如l1变成了l1=[1,2,3,4]，这时vue会把整个页面重新渲染，并加载到页面上。如果我们的代码添加了key属性，如下：

// 假如有一个列表 l1=[1,2,3] 显示{{i}}

此时页面上渲染出三个div标签，如果我们给l1增加一个值，l1=[0,1,2,3,4]后，vue不会重新渲染之前的三个div，只会在对应位置添加一个div标签，这时就节省了很多资源。

js循环几种方式

与vue没有关系

基于索引的循环 // 基于索引的循环 for (i = 0; i < 5; i++) { console.log(i) }

数组的循环数组基于索引的循环 // 数组基于索引的循环 l1 = [3, 4 ,5] for (i = 0; i < l1.length; i++) { console.log(l1[i]) }

数组基于迭代的循环 // 基于数组的循环 let l1 = [4, 5, 6] // 注意下面的循环中i是索引，与vue的v-for循环不同v-for="(值, 索引)" for (i in l1){ console.log(l1[i]) } 基于of的循环

此语法是es6才有语法，原来都是for i in xxx，这个是for i of xxx，可以直接显示值

// 基于数组的of的循环 let l1 = [4, 5, 6] for(i of l1){ console.log('数组的for of 循环：', i) }

数组的方法循环

只有数组有这个方法，其它的对象、字符串、数字等都没有此方法，总的来说就是限“数组”

// 基于数组的循环 let l1 = [4, 5, 6] l1.forEach(function (i) { console.log('数组的forEach循环：', i) })

jQuery的循环 // 基于jQuery的循环 let l1 = [4, 5, 6] // 注意两个变量是索引在前，值在后 $.each(l1, function (index, item) { console.log('值:', item,'索引:', index) })

点击按钮隐藏/显示列表示例

使用v-for循环显示列表

Title 测试v-for渲染点我显示 ID NAME PRICE {{item.id}} {{item.name}} {{item.price}} vm = new Vue({ el: '#app', data: { show: false, good_list: [ {id: 1, name: '塞尔达传说:荒野之息', price: '349'}, {id: 2, name: '塞尔达传说:王国之泪', price: '365'}, {id: 3, name: '对马岛之魂', price: '450'}, {id: 4, name: '战神5:诸神黄昏', price: '459'}, {id: 5, name: '恶魔之魂', price: '420'} ], }, methods: { handleClick() { this.show = !this.show } } })

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章