Vue 循环显示数组（Key : Value）的Value

原创已于 2022-04-02 15:02:21 修改 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-04-02 14:34:56 首次发布

VUE 专栏收录该内容

2 篇文章

订阅专栏

本文通过实例代码讲解了如何使用Vue.js进行数组和对象的遍历显示，包括遍历数组的message属性以及对象的各个属性。示例中详细展示了如何在HTML中使用v-for指令来实现数据绑定。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="vue.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
       <div id="app-0">
           <span>----------遍历数组-------------</span>
           <ul id="app-1">
           <li v-for="item in items">
           {{ item.message }} --
               <span v-for="i in item.message.length">
                   {{ item.message[i-1] }}
               </span>
           </li>
           </ul>
           <span>-----------数组索引------------</span>
           <ul id="app-2">
           <li v-for="(obj, objIndex) in items">
           {{ objParent }} - {{ objIndex }} - {{ obj.message }}
           </li>
           </ul>
           <span>----------遍历对象的属性-------------</span>
           <ul id="app-3">
           <li v-for="(stuVal, stuAtt) in student">
           {{ stuAtt }} -- {{ stuVal }}
           </li>
           </ul>
       </div>
       <script type="text/javascript">
           var app1 = new Vue({
           el: '#app-1',
           data: {
           items: [
           { message: 'Hello' },
           { message: 'World' },
               { message: 'SeeYouAgain'}
           ]
           }
           })

           var app2 = new Vue({
           el: '#app-2',
           data: {
               objParent: 'Parent',
           items: [
           { message: 'Hello' },
           { message: 'World' },
               { message: 'SeeYouAgain'}
           ]
           }
           })

           var app3 = new Vue({
           el: '#app-3',
           data: {
           student: {
                   name: 'Jack',
                   age: 15,
                   subject: 'math'
               }
           }
           })
       </script>
   </body>
</html>