VUE SEARCH

最新推荐文章于 2024-08-26 10:32:03 发布

转载最新推荐文章于 2024-08-26 10:32:03 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/caohongwu/p/9050948.html

文章标签：

#javascript #ViewUI

这里写图片描述
数据都是假的

代码部分
（注意我引用的是本地vue.min.js文件，请注意文件路径。）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue测试2</title>
        <script type="text/javascript" src="vue.min.js"></script>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                font-size: 14px;
                font-family: "微软雅黑";
            }
            #box{
                width: 500px;
                height: auto;
                border: 1px solid #ccc;
                margin: 50px auto;
                padding: 10px;
            }
            .search{
                width: 480px;
                height: 100px;
                text-align: center;
            }
            .searchBox{
                width: 230px;
                height: 40px;
                outline: none;
                text-indent: 10px;
                margin-right: 20px;
            }
            .btn{
                width: 100px;
                height: 50px;
                cursor: pointer;
                font-size: 18px;
            }
            .goodsheet{
                width: 500px;
                height: auto;
                border: 1px solid #eee;
            }
            .goodsheet tr td,
            .goodsheet tr th{
                width: 33%;
                border: 1px solid #eee;
                padding: 5px 10px;
                text-align: left;
            }
            .goodsheet tr th span{
                background: #ff9900;
                padding: 0 6px;
                color: #fff;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="search">
                <input type="text" class="searchBox" v-model="searchVal">
                <button class="btn">搜 索</button>
            </div>
            <table class="goodsheet">
                <tr>
                    <th>商品名</th>
                    <th>单价
                        <span @click="orderFn('price', false)">↑</span>
                        <span @click="orderFn('price', true)">↓</span>
                    </th>
                    <th>销量
                        <