Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
html - 在一个table表单中 td用v-for 使用v-if判断是否显示 然后用一个外部的button 判断点击最后一行隐藏
伊谢尔伦
伊谢尔伦 2017-04-17 15:06:23
0
3
1341

问题大概如题目描述的那样
也就是 v-for循环出来的 td
然后 点击外部一个button 让其中一个td隐藏 这个怎么实现
就是绑定

如图 也就是说 点击按钮“减少了”只将“回来了”这一列隐藏 点击再显示

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://211.149.193.19:8090/vue-tutorials/03.Ajax/jquery-zepto/fonts/iconfont.css" />
</head>

<body>

    <p id='item_list'>
        <table>
            <thead>
                <tr>
                    <td v-for="col in columns">
                        <strong v-show="show">{{ col.name }}</strong>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(index,entry) in items">
                    <td v-for="col in columns">
                        <span v-else>{{ entry[col.key] }}</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <select v-model="selected">
            <option selected>选择奖项</option>
            <option v-if="reportData.length==0">没有更多了</option>
            <option v-for="item1 in reportData" :value="item1.name">{{ item1.name }}</option>
        </select>
        <input type="button" value="{{ selected }}">
        <input type="checkbox" v-model="checked"><label for="checked">{{ checked }}</label>
        <input type="button" value="减少啊" @click="clickttt">
        <pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination>
    </p>

    <template id="paginationTpl">
            <p>
                <nav v-if="all > 1">
                    <ul class="pagination">
                        <li v-if="showFirst"><a href="javascript:" @click="cur--">«</a></li>
                        <li v-for="index in indexes" :class="{ 'active': cur == index}">
                            <a @click="btnClick(index)" href="javascript:">{{ index }}</a>
                        </li>
                        <li v-if="showLast"><a @click="cur++" href="javascript:">»</a></li>
                        <li><a>共<i>{{all}}</i>页</a></li>
                    </ul>
                </nav>
            </p>
    </template>
    <script src="http://211.149.193.19:8090/vue-tutorials/03.Ajax/jquery-zepto/js/vue.js"></script>
    <script src="http://211.149.193.19:8090/vue-tutorials/03.Ajax/jquery-zepto/js/zepto.js"></script>
    <script>
        Vue.component('pagination', {
            template: "#paginationTpl",
            // props: [pageAll],
            methods: {
                btnClick: function(index) {
                    console.log(index)
                }
            }
        })

        var vm = new Vue({
            el: "#item_list",
            data: {
                show: true,
                selected: "",
                checked: false,
                columns: [{
                    name: "你来了",
                    key: "C0"
                }, {
                    name: "你走了",
                    key: "C1"
                }, {
                    name: "别走了",
                    key: "C2"
                }, {
                    name: "回来了",
                    key: "AREA_ID"
                }],
                reportData: [{
                    id: 1,
                    name: "我来了"
                }, {
                    id: 2,
                    name: "我走了"
                }, {
                    id: 3,
                    name: "我变了"
                }, {
                    id: 4,
                    name: "你说呢"
                }],
                items: [],
                //分页参数
                pageAll: 0, //总页数,根据服务端返回total值计算
                perPage: 10 //每页数量
            },
            created: function() {
                console.log(this.reportData.length)
                var _this = this;
                $.ajax({
                    url: "data.json",
                    type: "GET",
                    // data: {
                    //     "page": page,
                    //     "perPage": this.perPage
                    // },
                    dataType: "json",
                    error: function(res) {
                        console.log(res)
                    },
                    success: function(res) {
                        console.log(res[0])
                        for (var p in res[0]) {
                            console.log(p)
                        }

                        _this.$data.items = res;


                        // if (res.status == 1) {
                        //     that.items = res.data.list;
                        //     that.perPage = res.data.perPage;
                        //     that.pageAll = Math.round(res.data.total / that.perPage); //计算总页数
                        // }
                    }
                });
                console.log(1111)
            },
            methods: {
                clickttt: function() {
//                    this.$data.show=!this.$data.show;
                },
                loadList: function(page) {
                    var that = this;
                    $.ajax({
                        url: "data.json",
                        type: "post",
                        data: {
                            "page": page,
                            "perPage": this.perPage
                        },
                        dataType: "json",
                        error: function() {
                            alert('请求列表失败')
                        },
                        success: function(res) {
                            console.log(res.data)
                            if (res.status == 1) {
                                that.items = res.data.list;
                                that.perPage = res.data.perPage;
                                that.pageAll = Math.round(res.data.total / that.perPage); //计算总页数
                            }
                        }
                    });
                },
                //初始化
                init: function() {
                    this.loadList(1);
                }
            }
        })
    </script>
</body>

</html>

json


Summer 2017/4/1 14:42:38
[{
"C0": "临夏州_康乐县",
"C1": 190893.39,
"C2": 24544.65,
"AREA_ID": "930013005"
},
{
"C0": "临夏州_永靖县",
"C1": 368900.35,
"C2": 40592.19,
"AREA_ID": "930013006"
},
{
"C0": "兰州市_东岗分局",
"C1": 88.48,
"C2": 126.4,
"AREA_ID": "930013106"
},
{
"C0": "临夏州_临夏县",
"C1": 107337.9,
"C2": 20612.1,
"AREA_ID": "930013008"
},
{
"C0": "临夏州_广河县",
"C1": 69738.07,
"C2": 34894.44,
"AREA_ID": "930013003"
},
{
"C0": "临夏州_和政县",
"C1": 46622.96,
"C2": 20954.97,
"AREA_ID": "930013002"
},
{
"C0": "临夏州_东乡县",
"C1": 96021.84,
"C2": 16725.63,
"AREA_ID": "930013004"
},
{
"C0": "临夏州_临夏市中心",
"C1": 1845311.12,
"C2": 129478.93,
"AREA_ID": "930013001"
},
{
"C0": "天水市_秦州区",
"C1": 0,
"C2": 0,
"AREA_ID": "930013801"
},
{
"C0": "临夏州_积石山",
"C1": 256181.79,
"C2": 15185.98,
"AREA_ID": "930013007"
},
{
"C0": "酒泉_肃州区",
"C1": 264312,
"C2": 402.6,
"AREA_ID": "930013701"
}
]
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

Antworte allen(3)
洪涛
洪涛2017-04-17 15:08:23 3 Etage

vue 最后的td添加v-show=‘st’ button绑定click 控制st的值为true false

Wie +0
Antwort hinzufügen
迷茫
迷茫2017-04-17 15:08:23 2 Etage

自己实现了
用v-bind绑定了类
可能不是最优

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://211.149.193.19:8090/vue-tutorials/03.Ajax/jquery-zepto/fonts/iconfont.css" />
    <style>
        .back{
            display: none;
        }
    </style>
</head>

<body>

    <p id='item_list'>
        <table>
            <thead>
                <tr>
                    <td v-for="(clIndex,col) in columns" :class="{back:(clIndex===a)}">
                        <strong v-show="show">{{ col.name }}</strong>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(index,entry) in items">
                    <td v-for="(colIndex,col) in columns"  v-show="show" :class="{back:(colIndex===a)}">
                        <span>{{ entry[col.key] }}</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <select v-model="selected">
            <option selected>选择奖项</option>
            <option v-if="reportData.length==0">没有更多了</option>
            <option v-for="item1 in reportData" :value="item1.name">{{ item1.name }}</option>
        </select>
        <input type="button" value="{{ selected }}">
        <input type="checkbox" v-model="checked"><label for="checked">{{ checked }}</label>
        <input type="button" value="减少啊" @click="clickttt">
        <pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination>
    </p>

    <template id="paginationTpl">
            <p>
                <nav v-if="all > 1">
                    <ul class="pagination">
                        <li v-if="showFirst"><a href="javascript:" @click="cur--">«</a></li>
                        <li v-for="index in indexes" :class="{ 'active': cur == index}">
                            <a @click="btnClick(index)" href="javascript:">{{ index }}</a>
                        </li>
                        <li v-if="showLast"><a @click="cur++" href="javascript:">»</a></li>
                        <li><a>共<i>{{all}}</i>页</a></li>
                    </ul>
                </nav>
            </p>
    </template>
    <script src="http://211.149.193.19:8090/vue-tutorials/03.Ajax/jquery-zepto/js/vue.js"></script>
    <script src="http://211.149.193.19:8090/vue-tutorials/03.Ajax/jquery-zepto/js/zepto.js"></script>
    <script>
        Vue.component('pagination', {
            template: "#paginationTpl",
            // props: [pageAll],
            methods: {
                btnClick: function(index) {
                    console.log(index)
                }
            }
        })
        let num=1;
        var vm = new Vue({
            el: "#item_list",
            data: {
                show: true,
                a:null,
                selected: "",
                checked: false,
                columns: [{
                    name: "你来了",
                    key: "C0"
                }, {
                    name: "你走了",
                    key: "C1"
                }, {
                    name: "别走了",
                    key: "C2"
                }, {
                    name: "回来了",
                    key: "AREA_ID"
                }],
                reportData: [{
                    id: 1,
                    name: "我来了"
                }, {
                    id: 2,
                    name: "我走了"
                }, {
                    id: 3,
                    name: "我变了"
                }, {
                    id: 4,
                    name: "你说呢"
                }],
                items: [],
                //分页参数
                pageAll: 0, //总页数,根据服务端返回total值计算
                perPage: 10 //每页数量
            },
            created: function() {
                console.log(this.reportData.length)
                var _this = this;
                $.ajax({
                    url: "./js/list.json",
                    type: "GET",
                    // data: {
                    //     "page": page,
                    //     "perPage": this.perPage
                    // },
                    dataType: "json",
                    error: function(res) {
                        console.log(res)
                    },
                    success: function(res) {
                        console.log(res[0])
                        for (var p in res[0]) {
                            console.log(p)
                        }

                        _this.$data.items = res;


                        // if (res.status == 1) {
                        //     that.items = res.data.list;
                        //     that.perPage = res.data.perPage;
                        //     that.pageAll = Math.round(res.data.total / that.perPage); //计算总页数
                        // }
                    }
                });
                console.log(1111)
            },
            methods: {
                clickttt: function() {
                    num++;
                    if (num%2==0){
                        this.$data.a=3;
                    }
                    else if(num%2==1){
                        this.$data.a=null;
                    }




                },
                loadList: function(page) {
                    var that = this;
                    $.ajax({
                        url: "./js/list.json",
                        type: "post",
                        data: {
                            "page": page,
                            "perPage": this.perPage
                        },
                        dataType: "json",
                        error: function() {
                            alert('请求列表失败')
                        },
                        success: function(res) {
                            console.log(res.data)
                            if (res.status == 1) {
                                that.items = res.data.list;
                                that.perPage = res.data.perPage;
                                that.pageAll = Math.round(res.data.total / that.perPage); //计算总页数
                            }
                        }
                    });
                },
                //初始化
                init: function() {
                    this.loadList(1);
                }
            }
        })
    </script>
</body>

</html>
Wie +0
Antwort hinzufügen
刘奇
刘奇2017-04-17 15:08:23 1 Etage 
<tr v-for="(index,entry) in items">
    <td v-for="col in columns" v-show="col.key == 'AREA_ID'?:'backon':''">
        <span v-else>{{ entry[col.key] }}</span>
    </td>
</tr>

这样就可以咯

按钮 @click="backon = !backon"
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage