<!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>