09-Vue之本地应用v-for指令

最新推荐文章于 2023-04-17 13:42:15 发布

爱学习de测试小白

最新推荐文章于 2023-04-17 13:42:15 发布

阅读量121

点赞数

分类专栏： # Vue 文章标签： vue

-- 来着爱学习de测试小白

本文链接：https://blog.csdn.net/IT_heima/article/details/112388432

版权

Vue 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

1. v-for指令

作用：根据数据生成列表结构
语法：（item，index）in 数据
说明：数组长度的更新会同步到页面上，是响应式的

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <div id="app">
        <input type="button" value="添加" @click='add'>
        <input type="button" value="删除" @click='remove'>
        <!-- 数组取值 -->
        <ul>
            <li v-for='item in arrInfo'>
                {{item}}
            </li>
        </ul>
        
        <!-- 数组下标 -->
        <ul>
            <li v-for='(item,index) in arrInfo'>
               {{index}} {{item}}
            </li>
        </ul>


        <!-- 对象数组取值 -->
        <ul>
            <li v-for='item in dataInfo' v-bind:title='item.name'>
               {{item.name}}
            </li>
        </ul>


    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <script>
         var app = new Vue({
             el:'#app',
             data:{
                 arrInfo:['名字:大海','年龄:26','城市:大连','职业:测试工程师'],
                 dataInfo:[
                     {'name':'大海'},
                     {'name':'小白'}
                    ]
             },
             methods:{
                 add:function(){
                     this.dataInfo.push({'name':'浪迹天涯'});

                 },
                 remove:function(){
                    this.dataInfo.shift();
                 }
                 
             }
         })
     </script>

</body>
</html>

爱学习de测试小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
09-Vue之本地应用v-for指令

1. v-for指令作用：根据数据生成列表结构语法：（item，index）in 数据说明：数组长度的更新会同步到页面上，是响应式的完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
复制链接

扫一扫