2023年7月18日发(作者：)

vue循环遍历字符串_Vue循环遍历v-forv-for遍历数组渲染⼀组数据的时候⽤ v-forv-for的语法类似于JavaScript中的for循环格式如下：item in items的形式我们来看⼀个简单的案例：如果在遍历的过程中不需要使⽤索引值v-for="movie in movies"依次从movies中取出movie，并且在元素的内容中，我们可以使⽤Mustache语法，来使⽤movie如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？语法格式：v-for=(item, index) in items其中的index就代表了取出的item在原数组的索引值。v-for可以⽤户遍历对象：⽐如某个对象中存储着你的个⼈信息，我们希望以列表的形式显⽰出来。{{index}}-{{value}}-{{key}}const app = new Vue({el: '#app',data: {info: {name: 'why',age: 18,height: 1.88}}})Array: (item,index) in Arrayitem 是数组的遍历index 是数组的索引可以⽤其它的参数代替，但是在后⾯也得写成⼀样的参数，尽量避免命名的冲突更改数组不能通过索引的⽅式更改数组，这样不会渲染页⾯不能通过更改长度的⽅式更改数组，也不会渲染页⾯检测数组更新因为Vue是响应式的，所以当数据发⽣变化时，Vue会⾃动检测数据变化，视图会发⽣对应的更新。Vue中包含了⼀组观察数组编译的⽅法，使⽤它们改变数组也会触发视图的更新。push()pop()shift()unshift()splice()sort()reverse()obj: (value,key,index) in objvalue 对象的 value 值key 对象的 key 值index 对象的索引更改对象向对象内添加或者删除属性不会渲染页⾯使⽤$set()⽅法语法this.$set(obj, key, value)- obj： 需要修改的对象- key: 对象的key值- value： 想添加或者修改的值- 将 key 值改成索引也客园修改数组Propertynum:num is number从 1 开始遍历到这个数字String遍历字符串的全部字母key属性只能⽤在Array和string中,值是唯⼀的vue不会去改变原有的元素和数据，⽽是创建新的元素然后把新的数据渲染进去在使⽤v-for的时候，vue⾥⾯需要我们给元素添加⼀个key属性，这个key属性必须是唯⼀的标识给key赋值的内容不能是可变的，可以⽤索引添加在写v-for的时候，都需要给元素加上⼀个key属性key的主要作⽤就是⽤来提⾼渲染性能的！key属性可以避免数据混乱的情况出现 (如果元素中包含了有临时数据的元素，如果不⽤key就会产⽣数据混乱)注意，千万不要将 v-for 和 v-if ⼀起使⽤。v-for 的优先级始终⽐ v-if ⾼，⽆论先后顺序。所以两个指令同时存在时总是先⽣成迭代逻辑，再在迭代逻辑中进⾏genIf的处理，最后在整个迭代⾥每项都进⾏⼀次判断，对性能造成浪费。将v-if提取到v-for之外，如果判断参数出现在迭代数据项⾥，可以结合computed来过滤迭代项后再进⾏渲染。