Vue2.x之列表、对象渲染

淡淡的烟草味﹌ 2022-05-23 13:08 186阅读 0赞

### 列表循环 ###

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> //脱壳，of对象，in数组 <template v-for="(item,idx) of list"> <div>{ { item.text }}---{ { idx }}</div> <span>{ { item.text }}---{ { idx }}</span> </template> </div> <script> let vm = new Vue({ el: '#app', data: { //☆☆☆操作列表元素请使用splice，shift,unshift,push,pop等编译方法，或者直接改变对象引用或者Vue.set(vm.list,1,1)/vm.$set(vm.list,1,1) list: [ { id: '0101', text: 'Hello' }, { id: '0102', text: 'Quincy' } ] } }) </script> </body> </html>

### 对象循环 ###

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对象循环</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-for="(item,key,index) of userinfo"> { { item }}===>{ { key }}===>{ { index }} </div> </div> <script> let vm = new Vue({ el:'#app', data:{ //改变值需要改变对象引用或者使用Vue.set(vm.userinfo,'addr','shanghai')/vm.$set(vm.userinfo,'addr','shanghai') userinfo:{ name:'Quincy', age:18, gender:'male' } } }) </script> </body> </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 条件渲染与列表渲染

文章目录 * vue 渲染 * * 条件渲染 * * v-if 与 v-else渲染以及 v-show * 列表渲染 ...

清疚/ 2024年04月18日 23:53/ 0 赞/ 86 阅读

相关 Vue 列表渲染

v-for 把一个数组对应为一组元素用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要使用 item in items 形式的特殊语法，i...

约定不等于承诺〃/ 2024年04月18日 23:05/ 0 赞/ 86 阅读

相关 vue实现商城列表渲染

需求：利用vue实现商城列表渲染所需数据如下： mockData: [{ "id":

痛定思痛。/ 2022年08月28日 05:54/ 0 赞/ 174 阅读

相关 Vue.js 学习(6) -- Vue指令之：列表渲染

本节的重点内容是v-for指令。 v-for指令将根据指令后的数据，循环的对DOM元素进行渲染。基础基础栗子： <ul id="example-1">

ゝ一纸荒年。/ 2022年06月15日 03:43/ 0 赞/ 226 阅读

相关 vue.js列表渲染

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head

缺乏、安全感/ 2022年05月25日 13:39/ 0 赞/ 264 阅读

相关 Vue2.x之列表、对象渲染

列表循环 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染</

淡淡的烟草味﹌/ 2022年05月23日 13:08/ 0 赞/ 187 阅读

相关 Vue_条件渲染和列表渲染

一.条件渲染 1.v-if： v-if=‘name’ ：name值的true 或 false ，决定着这个标签的是否显示 2.v-show： v-show=‘sho

快来打我*/ 2022年05月22日 13:27/ 0 赞/ 284 阅读

相关列表渲染——Vue.js

1. v-for循环遍历数组 `（1）v-for` 指令需要使用 `item in items` 形式的特殊语法 <ul id="example-1">

悠悠/ 2022年04月22日 12:38/ 0 赞/ 260 阅读

相关 Vue列表渲染

列表渲染用\`v-for\`把一个数组对应为一组元素使用v-for遍历对象属性维护状态用`v-for`把一个数组对应为一组元素我们

墨蓝/ 2021年10月20日 00:26/ 0 赞/ 423 阅读

相关 Vue列表渲染

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

你的名字/ 2021年09月29日 04:16/ 0 赞/ 403 阅读