vue 列表渲染

最新推荐文章于 2025-10-05 09:15:26 发布

原创最新推荐文章于 2025-10-05 09:15:26 发布 · 295 阅读

0 ·

CC 4.0 BY-SA版权

02.vue 学习教程专栏收录该内容

41 篇文章

订阅专栏

v-for 指令：

基本指令

对象指令

组件和v-for

过滤和排序

----------------------------------

v-for 指令：

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

demo:

 <h3>2、使用 v-for 来循环数组</h3>

    <span>列举1-4</span><br/>
    
    <ul>
      <li v-for="item in a">
        <span>{{item}}</span>
      </li>
    </ul>

脚本指令：

<script>
    var vm = new Vue({
      el:'#container',
      // 数据
      data:{
       
       a:["1","2","3","4"]

      },
      // 方法
     
    })
  </script>

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。

对象迭代 v-for

 <h3> 3、使用 v-for 循环输出 以下 json 串</h3>
  <p>
    mydatas:[
      {"name":"xmc","age":"保密","address":"地球中国","lover":"不告诉你"},
      {"name":"张三","age":"23","address":"地球中国","lover":"打游戏"},
      {"name":"李四","age":"25","address":"地球中国","lover":"读书"},
      {"name":"王五","age":"30","address":"唯一不下雪的地方","lover":"写代码"},
      {"name":"赵六","age":"18","address":"中国北京","lover":"写博客"},
      {"name":"钱七","age":"27","address":"中国陕西","lover":"做菜"}
    ]
  </p>
    <table border="10">
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
        <th>爱好</th>
      </tr>
      <tr v-for="(item,index) in mydatas">
        <!-- 其中 index 是索引，也就是数组的角标 -->
        <td><span>{{index}}</span></td>
        <td><span>{{item.name}}</span></td>
        <td><span>{{item.age}}</span></td>
        <td><span>{{item.address}}</span></td>
        <td><span>{{item.lover}}</span></td>
      </tr>
    </table>
  </div>

对应脚本执行：

 var vm = new Vue({
      el:'#container',
      // 数据
      data:{
        theWord:"圆形",
        flag:false,
        msg:'show me',
        mydatas:[
          {"name":"xmc","age":"保密","address":"地球中国","lover":"不告诉你"},
          {"name":"张三","age":"23","address":"地球中国","lover":"打游戏"},
          {"name":"李四","age":"25","address":"地球中国","lover":"读书"},
          {"name":"王五","age":"30","address":"suzhou","lover":"写代码"},
          {"name":"赵六","age":"18","address":"中国北京","lover":"写博客"},
          {"name":"钱七","age":"27","address":"中国陕西","lover":"做菜"}
        ],

组件和 v-for

在自定义组件里，你可以像任何普通元素一样用 v-for 。自动传递数据到组件里，因为组件有自己独立的作用域。

<h4>以下是 props 例子</h4>
    props 传递方法，回调的时候，把 message「你好」 传递回来「使用 props 中的 message 作为子组件的 data」
    <hr>
  <div id="app2">
    <!-- 如果要使用 props 来传递对象，就要使用 v-bind  -->
    <!-- 注意：在这里 age 在 props 中规定了要传入数字类型，这里传入 String 是为了演示效果，正式中使用要按照 age=100 来传入 -->
    <mycomponent
      message="你好"
      :mydata="{username:'tigerchain',age:28}"
      name-style="color:red"
      age="100"
      :clickme="show"
      />
  </div>

data 部分：

   data(){
        return {
          // 可以在数据里面将 props 值赋给 data 值，然后就可以修改这个值，但是原始的 props 中的值是修改不了的
          msg:this.message
        }
      },
      template: '<div>'+
                  '{{ message }}--{{msg}}'+
                  '<div>'+
                     '<span v-bind:style="nameStyle" @click="clickme()">{{ mydata.username}} {{this.age}}</span>'+
                     '<button @click="clickme(msg)">点击我</button>'+
                  '</div>'+
                ' </div>'
    })

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，而不是移动 DOM 元素来匹配数据项的顺序， Vue 将简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。

这个默认的模式是有效的，但是只适用于不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind来绑定动态值（在这里使用简写）：

变异方法

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

你打开控制台，然后用前面例子的 items 数组调用变异方法：example1.items.push({ message: 'Baz' }) 。

显示过滤和排序：

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

或者，您也可以在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 使用 method 方法：

<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}