如何修改一个网站的后台登陆系统,广州有什么好玩的地方推荐一下,网站建设 sheji021,wordpress 后台 获取分类id听我说 从 条件渲染 那一篇#xff0c;我学习到了如何用Vue对dom节点根据条件显示 但单单有条件还不够啊#xff0c;有时候数据是一大坨一大坨的数据#xff0c;如果Vue不提供咱要么使用“v-html” 要么就没办法实现 v-html又感觉太low了#xff0c;Vue提供了另外的指令更好…听我说 从 条件渲染 那一篇我学习到了如何用Vue对dom节点根据条件显示 但单单有条件还不够啊有时候数据是一大坨一大坨的数据如果Vue不提供咱要么使用“v-html” 要么就没办法实现 v-html又感觉太low了Vue提供了另外的指令更好的实现那便是列表渲染 列表渲染v-for 简单的列表渲染可以使用v-for来完成而Vue提供了两种采用形式的列表渲染 数组 对象 列表渲染之数组 假设我有一个数组然后我希望数组里面的数据通过展示在ul的一个一个li里面并且要求数组更新的同时li会自动的增减 假设data如下 //假设下面是Vue的配置对象
{data:{msgList:[{name:张三,age:19,sex:男},{name:李四,age:22,sex:男},{name:王五,age:20,sex:女},{name:陈真,age:30,sex:男},]}
} 那么dom节点可以这么写达到渲染的效果 !--假设这是根节点的内容--
ulli v-foritem of msgList{{item.name}} - {{item.age}} - {{item.sex}}/li
/ul 此时ul里面的li渲染出的个数等同于msgList的个数同时item表示当前li的数组元素 可以用JavaScript的for-of循环来理解这里用v-foritem in msgList也是一样的效果 item都是表示msgList的成员 完整代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0script src./vue.js/scripttitleDocument/title
/head
bodydiv idrootulli v-foritem of msgList{{item.name}} - {{item.age}} - {{item.sex}}/li/ul/div
/body
scriptlet vm new Vue({el:#root,data:{msgList:[{name:张三,age:19,sex:男},{name:李四,age:22,sex:男},{name:王五,age:20,sex:女},{name:陈真,age:30,sex:男}]}})
/script
/html 列表渲染之对象 Vue还允许配置为对象这种可遍历的变量来使用v-for 如果配置为对象的话那么会拿到两个参数一个是key一个是value先拿到value在拿到key 具体代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0script src./vue.js/scripttitleDocument/title
/head
bodydiv idrootulli v-for(value,key) of msgObj{{key}} - {{value}}/li/ul/div
/body
scriptlet vm new Vue({el:#root,data:{msgObj:{name:陈真,age:30,sex:男}}})
/script
/html 当然也可以写一个参数只接受value div idrootulli v-forvalue of msgObj{{value}}/li/ul
/div 完全写法 无论是对象还是数组列表渲染都会给当前值索引所以对于数组的话就可以写成两个参数显示value后是索引 ulli v-for(item,index) of msgList{{index}}、{{item.name}} - {{item.age}} - {{item.sex}}/li
/ul 如何使对象的话就这么写 ulli v-for(value,key,index) of msgObj{{index}}、{{key}} {{value}}/li
/ul key的应用渲染原理浅析 为了避免出错无论是react还是vue使用v-for原则上都应该配置唯一标识作为key 当出现要对数据修改时未配置唯一标识key可能会出现bug 因此对于需要用上v-for的节点请配置上数据唯一标识作为key 浅析出错原因 Vue在监控到数据改变时并不会如我们所想的一样马上渲染dom 而是会先渲染虚拟dom然后通过特定算法或者说特定规则去渲染实际dom 渲染规则如下 当遇到v-for时首先寻找数据老的虚拟dom和新的虚拟dom的唯一标识进行对比以li为例 在li节点中如果有一样的部分那么照搬老的dom不重新渲染直接搬运反之根据新的虚拟dom重新渲染 如果li中这个节点在旧虚拟dom不存在那么久会按照新的虚拟dom重新渲染 key的具体用法 key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法在新旧 nodes 对比时辨识 VNodes。如果不使用 keyVue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时它会基于 key 的变化重新排列元素顺序并且会移除 key 不存在的元素。 对于 Vue中的key 的用法也很简单他是为了标识v-for每个循环元素的唯一性所以key也应该是唯一的 写法如下 dom v-foritem in list :keyitem.id/dom 此时当前dom与数据唯一的id互相绑定这样如果dom更新了新旧虚拟dom就能一一对应的去对比
就不会出现元素紊乱并且渲染效率低下的问题 具体代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0script src./vue.js/scripttitleDocument/title
/head
bodydiv idrootulli v-foritem of msgList :keyitem.id{{item.name}} - {{item.age}} - {{item.sex}}/li/ul/div
/body
scriptlet vm new Vue({el:#root,data:{msgList:[{id:1,name:张三,age:19,sex:男},{id:2,name:李四,age:22,sex:男},{id:3,name:王五,age:20,sex:女},{id:4,name:陈真,age:30,sex:男}]}})
/script
/html 注切忌把索引作为key因为只要不是往末尾插入数据或者删除数据的方式来修改数据都会造成index失去唯一标识的作用 文章转载自StarVik 原文链接https://www.cnblogs.com/Star-Vik/p/18008874 体验地址引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构
