08-Vue循环结构、遍历数组与对象实例

最新推荐文章于 2023-12-04 23:45:00 发布

解甲归田1

最新推荐文章于 2023-12-04 23:45:00 发布

阅读量1.4k

点赞数

分类专栏： Vue从入门到精通

本文链接：https://blog.csdn.net/xie_qi_chao/article/details/104877640

版权

本文探讨了Vue框架中的循环结构，重点讲解了v-for指令的使用，包括如何遍历数组和对象。强调了不同时使用v-if和v-for的建议，以及key属性在虚拟DOM更新中的重要性。

摘要由CSDN通过智能技术生成

循环结构

v-for

用于循环的数组里面的值可以是对象，也可以是普通元素

<ul id="example-1">
   <!-- 循环结构-遍历数组  
	item 是我们自己定义的一个名字  代表数组里面的每一项  
	items对应的是 data中的数组-->
  <li v-for="item in items">
    {
  { item.message }}
  </li> 

</ul>
<script>
 new Vue({
    
  el: '#example-1',
  data: {
    
    items: [
      {
     message: 'Foo' },
      {
     message: 'Bar' }
    ]，
   
  }
})
</script>

不推荐同时使用 v-if 和 v-for
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

   <!--  循环结构-遍历对象
		v 代表   对象的value
		k  代表对象的 键 
		i  代表索引	
	---> 
     <div v-if='v==13' v-for='(v,k,i) in obj'>{
  {v + '---' + k + '---' + i}}</div>

<script>
 new Vue({
    
  el: '#example-1',
  data: {
    
    items: [
      {
     message: 'Foo' }