问题大概如题目描述的那样
也就是 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"
}
]
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
vue 最後の td は v-show=‘st’ ボタン バインディング クリックを追加して、st の値を true false に制御します
自分で実装しました
リーリークラスのバインドに v-bind を使用しました
最適ではない可能性があります
リーリー
以上です
リーリー