vue2_列表渲染、数据监视

2022-04-03 18:01:10 阅读：135 来源： 互联网

1列表渲染

1.1、基本列表

v-for指令

用于展示列表数据
语法： <li v-for="(item,index) in items " :key="index"> ,这里 key 可以是 index ,更好是遍历的对象的唯一标识。
可遍历：数组、对象、字符串（用的少）、指定次数（用的少）

<!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>初始vue</title>
    <!-- 引入vue-->
    <script src="/vueBaseJs/vue.js"></script>

</head>
<body>
    <div id="root">
        <!-- 遍历数组-->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) in personList" :key="p.id">
                {{p.name}} _ {{p.age}}
            </li>
        </ul>

        <!-- 遍历对象-->
        <h2>车配置列表</h2>
        <ul>
            <li v-for="(val,k) of car" ::key="k">
                {{k}} ： {{val}}
            </li>
        </ul>

         <!-- 遍历字符串 -->
         <!-- <h2>遍历字符串</h2>
         <ul>
             <li v-for="(char,index) of str" ::key="index">
                 {{index}} _ {{char}}
             </li>
         </ul> -->

         <!-- 遍历次数 -->
         <!-- <h2>遍历次数</h2>
         <ul>
             <li v-for="(number,index) in 5 " ::key="index">
                 {{number}} _ {{index}}
             </li>
         </ul> -->

    </div>

    <script>
        Vue.config.productionTip=false;//阻止vue启动时生成生产提示

        const vm=new Vue({
            el:"#root",
            data:function(){
                return {
                    personList:[
                        {id:001,name:"张三",age:18},
                        {id:002,name:"李四",age:19},
                        {id:003,name:"王五",age:20}
                    ],
                    car:{
                        name:"奥迪rs7",
                        price:"150w",
                        color:"黑色"
                    },
                    str:"Hello World!"              
                }
            },
        });

    </script>

    
</body>
</html>

结果：

标签：index,遍历,name,渲染,age,列表,vue2,id
来源： https://www.cnblogs.com/fhzmasl/p/16096767.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue2_列表渲染、数据监视

1列表渲染

1.1、基本列表