html - 在一个table表单中 td用v-for 使用v-if判断是否显示然后用一个外部的button 判断点击最后一行隐藏-PHP中文网问答

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

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





    
    
    




    
        

            
                
                    
                        {{ col.name }}
                    
                
            
            
                
                    
                        {{ entry[col.key] }}
                    
                
            
        
        
        
        {{ checked }}

{{ col.name }}
{{ entry[col.key] }}

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"
}
]

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