Vue 表格小例子

html

<div id="app2">
    <input type="text" v-model="xuhao">
    <input type="text" v-model="name">
    <input type="text" v-model="price">
    <input type="text" v-model="pname" placeholder="请输入筛选条件">
    <button @click="addData" >添加</button>
    <table>
        <tr>
            <td>序号</td>
            <td>品牌</td>
            <td>创建日期</td>
            <td>价格</td>
            <td>操作</td>
        </tr>
        <tr v-if="list2.length==0">
            <td colspan="4">当前无记录</td>
        </tr>
        <!--| filterBy pname in 'pinpai-->
        <tr v-for="i in list2 | filterBy pname in 'pinpai' ">
            <td>{{i.xuhao}}</td>
            <td>{{i.pinpai}}</td>
            <td>{{i.time}}</td>
            <td>{{i.price}}</td>
            <td>
                <button @click="deleateData(i.xuhao)">删除</button>
            </td>
        </tr>
    </table>
</div>

<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>

css

<style> table{ width: 300px; font-size: 16px; font-weight: 600; text-align: center; } table tr td{ border: 1px solid cornflowerblue; } </style>

 

js

var myDate = new Date();
new Vue({
    el: "#app2",
    data: {
        list: [
            {
                "xuhao": 1,
                "pinpai": "宝马",
                "time": myDate.toLocaleDateString(),
                "price": 890000
            }
        ],
        list2: [
            {
                "xuhao": 1,
                "pinpai": "宝马",
                "time": myDate.toLocaleDateString(),
                "price": 890000
            },
            {
                "xuhao": 2,
                "pinpai": "宝马",
                "time": myDate.toLocaleDateString(),
                "price": 890000
            },
            {
                "xuhao": 2,
                "pinpai": "aaaaaaaaaa",
                "time": myDate.toLocaleDateString(),
                "price": 890000
            }
        ],
        xuhao: 0,
        name: "",
        price: "",
        pname:'',
    },
    methods: {
        addData: function () {
            var newList = {
                "xuhao": this.xuhao,
                "pinpai": this.name,
                "time": myDate.toLocaleDateString(),
                "price": this.price,

            }
            this.list2.push(newList);
            this.xuhao = 0;
            this.name = "";
            this.price = "";
        },
        deleateData: function (id) {

            if (!confirm("是否要删除数据？")) {
                return;
            }
            //判断索引的位置
            var weizhi = this.list2.findIndex(
                function (item) {
                    return item.xuhao == id
                }
            )
            //删除选中的索引
            this.list2.splice(weizhi, 1)
            console.log(id);
        }
    }
})