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' 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'}]
问题解答
回答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' 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>回答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'
相关文章：
1. docker安装后出现Cannot connect to the Docker daemon.2. 网页爬虫 - Python：爬虫的中文编码问题？3. javascript - 修改表单多选项时和后台同事配合的问题。4. ubuntu 远程管理KVM设置问题5. javascript - H5页面怎么查看console信息？6. javascript - vue生成一维码?求助！！！！！急7. css - 手机页面在安卓和苹果浏览器显示不同的小小问题8. javascript - 关于Js中 this的一道题9. angular.js - angularjs如何动态改变ng-model值，在controller中获取input中输入的值并组合post发送到后台10. browsersync检测的静态页面只能用index.html命名，用demo.html就不能实时同步，检测动态页面的时候，比如wamp环境下，用browsersync能打开页面，但不能实现同步
网公网安备