11 笔记

最新推荐文章于 2024-11-12 16:34:34 发布

梦梦的小斑鸠

最新推荐文章于 2024-11-12 16:34:34 发布

阅读量64

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/CP011522/article/details/126990823

版权

v-for遍历数组

<body>

    <div id="app"> 
        <!-- 添加一个点击事件 利用push在结尾添加一个元素 -->
        <!-- v-for='item in + 数组' -->
        <button @click="add">点击送马超</button>
        <ul> 
            <li v-for="(item, index) in list">{{ index }}-{{ item }}</li> 
        </ul> 
    </div>
     <script src="./vue.js"></script>
       <script>
          new Vue({
            el:'#app', 
        data: { 
             list:['刘备','关羽','张飞','赵云','黄忠']
        },
        methods:{
                add(){        
                    this.list.push('马超')
                }
                }
        })
       </script>
</body>

v-for遍历对象

<body>
    <div id="app">
     <ul>        
              <!-- item in 属性名 -->
        <li v-for="item in obj">{{item}}</li>
              <!-- 属性值，属性名 -->
        <li v-for="(val,key) in obj">{{ val }}-------{{key}}</li>
               <!-- 遍历数字 -->
        <li v-for="num in 9">{{ num }} </1i>
     </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
         new Vue({
            el:'#app', 
        data: { 
            obj:{
                name:'马超',
                zhandouli:10000000,
                sex:'男'
            },
            obj:{
                name:'曹操',
                zhandouli:9999999,
                sex:'男'
            }
            
        }
    })
    </script>
</body>

v-for遍历数字

<body>
    <div id="app">
        <!-- 遍历数字1-10 -->
        <ul>
            <li v-for="num in 10">{{ num }}</li>

        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
new Vue({
       el:'#app'
})   
 </script>
    
</body>

v-for中的key

<body>
    <div id="app">
        <button @click="list.splice(1,0,{id:5,name:'赵六'})">点击送人</button>
       <ul>
                             <!-- key属性唯一 -->
        <li v-for="item in list" :key="item.id">
            <input type="checkbox">
            <span>{{ item.name }}</span>
        </li>
       </ul>
       <script src="./vue.js"></script>
       <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'迪加'},
                    {id:2,name:'刘备'},
                    {id:3,name:'炒菜'}
                ]
            }
        })

       </script>

    </div>

    
</body>