<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
        #goods #goods-table th{
            background-color:#ccc;
            text-align:center;
        }

        #goods-table .expensive{
            background-color: orangered;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="goods">
          <table id="goods-table" border="1" cellspacing=0>
              <tr>
                  <th>num</th>
                  <th>name</th>
                  <th>price</th>
              </tr>
               <tr :class="item.price>=60?'expensive':''" v-for="(item,index) in goods_list" :key="index">
                   <td>{{index}}</td>
                   <td>{{item.name}}</td>
                   <td>{{item.price}}</td>
               </tr>
          </table>
</div>

<script>
    var goods = new Vue({
        el:"#goods-table",
        data:{
            price:60,
            isactive: true,
            goods_list:[
                {"name":"python入门","price":50},
                {"name":"python进阶","price":100},
                {"name":"python高级","price":75},
                {"name":"python研究","price":55},
                {"name":"python教育","price":110},
            ]
        },
        methods:{
        },
    });

</script>

</body>
</html>