vue 作业练习

练习:

goods: [

        {"name":"python入门","price":50},

        {"name":"python进阶","price":100},

        {"name":"python高级","price":75},

        {"name":"python研究","price":55},

        {"name":"python教育","price":110},

]

 

# 把上面的数据采用table 表格输出到页面, 价格大于60 的那一条数据需要添加

背景颜色为橙色orange

 

无样式基本显示框架:

<div id="goods">
          <table id="goods-table" border="1">
              <tr>
                    <th>name</th>
                    <th>price</th>
              </tr>
               <tr v-for="(item,index) in goods_list">
                   <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
               </tr>
          </table>
</div>

<script脚本代码>
    var goods = new Vue({
        el:"#goods-table",
        data:{
            num: 0,
            goods_list:[
                {"name":"python入门","price":50},
                {"name":"python进阶","price":100},
                {"name":"python高级","price":75},
                {"name":"python研究","price":55},
                {"name":"python教育","price":110},
            ]
        },
    });
</script脚本代码>