zoukankan      html  css  js  c++  java
  • 练习解答:根据条件判断改变样式

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

      

  • 相关阅读:
    iOS 自带系统语音识别
    对iOS10新增Api的详细探究
    iOS 技术前瞻
    iOS 之 byte NSString NSData类型转换
    iOS 文本属性
    基本力
    xamarin mac 基础知识 之 界面
    xamarin mac 之 基础知识
    xamarin mac 之 资料
    I方法 thinkphp
  • 原文地址:https://www.cnblogs.com/eliwen/p/12036654.html
Copyright © 2011-2022 走看看