vue中sort排序与revers数据反序
生活随笔
收集整理的這篇文章主要介紹了
vue中sort排序与revers数据反序
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的變異方法：排序：sort()方法 和反轉(zhuǎn)：reverse() 方法</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="demo">
<li v-for="(v,k) in comments">
{{v.id}}——{{v.content}}
<button v-on:click="remove(k)">刪除</button>
</li>
<textarea rows="10" cols="20" v-model="current"></textarea><br/>
<button v-on:click="push('first')">在數(shù)據(jù)前面增加</button>
<button v-on:click="push('last')">在數(shù)據(jù)后面增加</button>
<br>
<button v-on:click="del('first')">刪除第一個數(shù)據(jù)</button>
<button v-on:click="del('last')">刪除最后一個數(shù)據(jù)</button>
<br>
<button v-on:click="sort">降序排序</button>
<br>
<button v-on:click="reverse">數(shù)據(jù)反轉(zhuǎn)</button>
<br>
<button v-on:click="alldel">刪除所有數(shù)據(jù)</button>
</div>
<script type="text/javascript">
new Vue({
el:"#demo",
data:{
current:"",
comments:[
{id:1,content:'JAVA'},
{id:0,content:'PHP'},
{id:3,content:'HTML'},
{id:2,content:'CSS'}
]
},
methods:{
//刪除所有數(shù)據(jù)的方法：
alldel(){
this.comments=[];
},
//倒序排序的方法：
sort(){
this.comments.sort((a,b)=>{
return a.id<b.id;
});
},
//反轉(zhuǎn)數(shù)據(jù)：
reverse(){
this.comments.reverse();
},
//增加數(shù)據(jù)的方法：
push(type){
var id=this.comments.length;
var content={id:id,content:this.current};
switch (type){
case 'first':
this.comments.unshift(content);
break;
case 'last':
this.comments.push(content);
break;
}
this.current="";
},
//刪除數(shù)據(jù)的方法：
del(type){
switch (type){
case 'first':
this.comments.shift();
break;
case 'last':
this.comments.pop();
break;
}
},
//點擊刪除，刪除對應(yīng)的數(shù)據(jù)信息：
remove(k){
this.comments.splice(k,1);
}
}
});
</script>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的vue中sort排序与revers数据反序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 虚拟信用卡安全码在哪里？这几种方法可以查
- 下一篇： 道德准则