基本列表的运用

最新推荐文章于 2024-06-04 21:41:16 发布

誰言秋桜

最新推荐文章于 2024-06-04 21:41:16 发布

阅读量44

点赞数

分类专栏：学习笔记 html js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_64948861/article/details/128947247

版权

学习笔记同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

基本列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <div id="root">
        <!-- 便利数组 -->
        <h2>人员列表(用的多)</h2>
        <ul>
            <li v-for="(p,index) of persons" :key='p.id'>

                <!-- <li v-for="p in persons" :key='p.id'> -->
                    {{p.name}}-{{p.age}}
            </li>
        </ul>
        <!-- 便利对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value,k) of car" :key='k'>
                {{k}}-{{value}}
            </li>
        </ul>
            <!-- 便利字符串 -->
            <h2>字符串信息(用的少)</h2>
            <ul>
                <li v-for="(char,index) of str" :key='index'>
                    {{char}}-{{index}}
                </li>
            </ul>

              <!-- 便利指定次数 -->
              <h2>便利指定次数(用的少)</h2>
              <ul>
                  <li v-for="(number,index) of 9" :key='index'>
                      {{index}}-{{number}}
                  </li>
              </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        
        new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'001',name:'凤凰',age:16},
                    {id:'002',name:'凤1',age:11},
                    {id:'003',name:'凤2',age:19}
                ],
            
            car:{
                name:'奥迪',
                jiag:'70万',
                color:'黑色'
            },
            str:'hello'
        }
        })
        </script>

</body>
</html>