mustache模板引擎-指令 v-for

最新推荐文章于 2022-07-26 18:43:35 发布

王建博09

最新推荐文章于 2022-07-26 18:43:35 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/wangjianbo09/article/details/117671922

版权

es6

Date 2021-06-07

mustache模板引擎-指令都是以 v-开头。

v-for 即循环生成标签。

注意：代码中用了vue框架。

使用方法如下

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, inital-scale=1.0"/>
        <title>Document</title>
    </head>
    <body>
        <div id ='app'>
             <h1>系统名称:{{title}}</h1>
             <ul></ul>
                 <li key="item.id" v-for="(item,i) in products">
                  name:{{item.name}}
                 </li>
             </ul>
        </div>
        <script src='./vue.min.js'></script>
        <script>
            var Vm =new Vue({
                el:"#app",
                data:{
                    title:"货物清单",
                    products:[
                        {
                            name:" xiaomi",
                            stock:100,
                            id:1
                        },
                        {
                            name:"huawei",
                            stock:100,
                            id:2
                        },
                        {
                            name:" oppo",
                            stock:100,
                            id:3
                        },
                        {
                            name:"vivo",
                            stock:100,
                            id:4
                        },
                    ]

                }
            });
        </script>
    </body>
</html>

运行效果如下图：