美文网首页
2018-09-11

2018-09-11

作者: 盛邦升华 | 来源:发表于2018-09-11 16:23 被阅读0次
    <!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

    相关文章

      网友评论

          本文标题:2018-09-11

          本文链接:https://www.haomeiwen.com/subject/aoeugftx.html