制作网站需要的技术,帮忙网页设计师,安卓apk开发,自己做网站现实么跟其他语言中的for一样#xff0c;是用来渲染多个类似实例的。
语法为v-for(item, index) in 可迭代对象#xff0c;一般就用于遍历数组。这里的语法跟Python中的for循环enumerate也有点相似之处#xff0c;但要注意item在前#xff0c;index在后#xff0c;…跟其他语言中的for一样是用来渲染多个类似实例的。
语法为v-for(item, index) in 可迭代对象一般就用于遍历数组。这里的语法跟Python中的for循环enumerate也有点相似之处但要注意item在前index在后同时也可以只遍历item。
遍历得到的item和index可以通过双大括号插入语句在网页上渲染。
示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptdiv idapp!-- 无序列表ul --ul!-- 列表中的标签项li --li v-for(item, index) in text_list{{ index1 }}-{{ item }}/li/ululli v-foritem in text_list{{ item }}/li/ul/divscriptconst app new Vue({el: #app,data: {text_list: [星期一, 星期二, 星期三, 星期四]}})/script
/body
/html效果如下 在实际开发中使用v-for渲染li这样的条目还有一点需要注意就是最好给每个条目加上:key唯一标识这样将每个渲染出来的条目唯一的标识起来。因为v-for的默认行为会尝试就地复用即如果对数组中的成员进行了更改如删除v-for会直接尝试把被删掉标签后面的内容挪动到前面来而非直接重新渲染这样的行为在某些时候会导致问题例如当被删去的标签有独特的属性时值得注意。
