vue.js 프레임 워 크 는 폼 정렬 과 페이지 효과 구현
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../lib/vue.min.js" type="text/javascript"></script>
<title> </title>
</head>
<body>
<div id="app">
<mydiv v-bind:info="info" v-bind:header="header" v-bind:num="num" v-bind:page="page"></mydiv>
</div>
<script type="text/x-template" id="mysc">
<div>
<table>
<tr>
<th v-for='x in header' v-on:click="bit(x)">{{x.key}}</th>
</tr>
<tr v-for="y in fenye">
<th v-for="x in header">{{y[x.name]}}</th>
</tr>
</table>
<button v-on:click="lastPage"> </button>
<button v-on:click="nextPage"> </button>
</div>
</script>
<script type="text/javascript">
Vue.component('mydiv',{
template:'#mysc',
props:{
/* */
info:Array,
header:Array,
num:Number,
page:Number,
boolen:Boolean,
tiaojian:String
},
data: function() {
return {}
},
computed:{
fenye:function(){
/* */
var list=this.info;
var paixu=this.tiaojian;
for(var i = 1;i<list.length;i++){
for(var j=0;j<list.length-i;j++){
if(this.boolen){
if(list[j][paixu]>list[j+1][paixu]){
var k=list[j+1];
list[j+1]=list[j];
list[j]=k;
}
}else{
if(list[j][paixu] < list[j + 1][paixu]) {
var k;
k = list[j];
list[j] = list[j + 1];
list[j + 1] = k;
}
}
}
}
/* */
var list2 = [];
var start= this.num*(this.page-1);
var end=start+this.num;
if(end<list.length){
for(var i =start;i<end;i++){
list2.push(list[i])
}
}else{
for(var i =start;i<list.length;i++){
list2.push(list[i])
}
}
return list2;
}
},
methods:{
bit:function(x){
this.boolen=!this.boolen;
this.tiaojian=x.name;
},
lastPage:function(){
console.log(this.num)
if(this.page > 1) {
this.page = this.page - 1;
}
},
nextPage: function() {
var pageNum = this.info.length / this.num;
if(this.page < pageNum) {
this.page = this.page + 1;
}
}
}
})
var phone=new Vue({
el:'#app',
data:{
boolen:true,
num:5,
page:1,
info:[],
header:[{
key: ' ',
name:'name'
}, {
key: ' ',
name:'price'
}, {
key: ' ',
name:'num'
}]
}
})
for(var i = 0;i<22;i++){
phone.info.push({
name:' '+i,
num:i,
price:100*i
})
console.log(111)
}
</script>
</body>
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
