2018-09-11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id="l1">
    <table border="1" cellspacing="0">
        <thead>
            <tr>
                <td>编号</td>
                <td>品种</td>
                <td>价格</td>
            </tr>
        </thead>
        <tbody>
          <tr v-for='arrf in arrf'>
                <td>{{arrf.number}}</td>
                <td>{{arrf.name}}</td>
                <td>{{arrf.much}}</td>
            </tr>   
        </tbody>
    </table>
   </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#l1',
            data:{
              arrf:[{number:'1',name:'西瓜',much:'50'},
                        {number:'2',name:'鸭梨',much:'50'},
                        {number:'3',name:'苹果',much:'50'},]
            }
        })
    </script>
</body>
</html>
QQ图片20180911153817.jpg
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title> 
    </head>
    <body>
        <div id="demo1">
            {{ppp}}
            <ul>
                <li v-for='value in arr'>{{value}}</li>
                <li v-for='demo in obj'>{{demo}}</li>
                <li v-for="(arr1,index) in arr">{{index}}=>{{arr1}}</li>
                <li v-for="(arrf,index) in arrf">{{arrf.name}}{{arrf.much}}</li>
            </ul>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#demo1',
                data:{
                    ppp:'HiHiHi',
                    arr:[1,2,3],
                    obj:{name:'小明',age:'100'},
                    arrf:[{name:'西瓜',much:'50'},
                        {name:'鸭梨',much:'50'},
                        {name:'苹果',much:'50'},]
                }
            })
            
        </script>
    </body>
</html
QQ图片20180911154035.jpg

QQ图片20180911154202.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容