问题大概如题目描述的那样
也就是 v-for循环出来的 td
然后 点击外部一个button 让其中一个td隐藏 这个怎么实现
就是绑定
如图 也就是说 点击按钮“减少了”只将“回来了”这一列隐藏 点击再显示
{{ 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" } ]
<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"
自己实现了
用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?1.2.1" /> <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?1.2.1"></script> <script src="http://211.149.193.19:8090/vue-tutorials/03.Ajax/jquery-zepto/js/zepto.js?1.2.1"></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>
vue 最后的td添加v-show=‘st’ button绑定click 控制st的值为true false