html - 在一個table表單中 td用v-for 使用v-if判斷是否顯示 然后用一個外部的button 判斷點擊最后一行隱藏
問題描述
問題大概如題目描述的那樣也就是 v-for循環出來的 td 然后 點擊外部一個button 讓其中一個td隱藏 這個怎么實現就是綁定
如圖 也就是說 點擊按鈕“減少了”只將“回來了”這一列隱藏 點擊再顯示
<!DOCTYPE html><html><head> <meta charset='UTF-8'> <title></title> <link rel='stylesheet' /></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'}]
問題解答
回答1：vue 最后的td添加v-show=‘st’ button綁定click 控制st的值為true false
回答2：自己實現了用v-bind綁定了類 可能不是最優
<!DOCTYPE html><html><head> <meta charset='UTF-8'> <title></title> <link rel='stylesheet' /> <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>回答3：
<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'
相關文章：
網公網安備