2018-09-17 數(shù)組API;過濾器鸭轮;計(jì)算屬性

數(shù)組API

①:string():將數(shù)組轉(zhuǎn)化為字符串并分隔每個(gè)元素齿诉;

var arr=[1,2,3];
String(arr)
"1,2,3"
arr//[1, 2, 3]

注:不改變?cè)瓟?shù)組

②:join():將數(shù)組中的所有元素連接成一個(gè)字符串竣蹦;

var arr=[1,2,3];
arr.join('')//"123"

var arr=[1,2,3];
arr.join(' ')//"1 2 3"

var arr=[1,2,3];
arr.join(',')//"1,2,3"
arr//[1, 2, 3]

強(qiáng)調(diào):如果join省略"",就等效于String
注:不改變?cè)瓟?shù)組

③:contact():將傳入的數(shù)組或者元素與原數(shù)組合并顶猜,組成一個(gè)新的數(shù)組并返回;

var arr1=[1,2,3],arr2=[4,5,6]
arr1.concat(1,2)//[1, 2, 3, 1, 2]

var arr1=[1,2,3],arr2=[4,5,6]
arr1.concat(arr2)//[1, 2, 3, 4, 5, 6]

強(qiáng)調(diào):concat的參數(shù)中包含數(shù)組痘括,則打散數(shù)組长窄,以單個(gè)元素拼接

④:slice():連接兩個(gè)或多個(gè)數(shù)組;

var arr=[1,2,3,4]
arr.slice(0)//[1, 2, 3, 4]
arr.slice(0,2)//[1, 2]
arr.slice(-3)//[2, 3, 4]
arr.slice(-3,-1)//[2, 3]
arr.slice(0,2)//[1, 2]
arr//[1, 2, 3, 4]

獲取子數(shù)組:var subArr=arr.slice(starti,endi+1);
獲得arr中starti位置開始远寸,到endi位置的所有元素組成的新數(shù)組
強(qiáng)調(diào):含頭不含尾
省略第二個(gè)參數(shù):表示從starti一直取到結(jié)尾
可支持負(fù)數(shù)參數(shù):-n表示倒數(shù)第n個(gè)元素抄淑,相當(dāng)于length-n

⑤:splice():從數(shù)組中添加/刪除一些元素屠凶,然后返回被刪除的元素驰后;

var arr=[1,2,3,4]
arr.splice(0)//[1, 2, 3, 4]

var arr=[1,2,3,4]
arr.splice(-1)//[4]

var arr=[1,2,3,4]
arr.splice(0,3)//[1, 2, 3]
arr//[4]

刪除,插入矗愧,替換:(直接修改原數(shù)組)
1灶芝、刪除:var deletes=arr.splice(starti,n);
刪除arr中starti位置開始的n個(gè)元素
返回被刪除的元素組成的臨時(shí)新數(shù)組

⑥:reverse():顛倒數(shù)組中元素的順序;

arr=[1,2,3,4]
arr.reverse()//[4, 3, 2, 1]
arr//[4, 3, 2, 1]

反轉(zhuǎn)數(shù)組元素:arr.reverse();

⑦:push():添加一個(gè)或者多個(gè)元素到數(shù)組末尾唉韭,并且返回?cái)?shù)組新的長(zhǎng)度夜涕;

var arr=[1,2,3,4]
arr2=arr.push(1)//5
//返回新數(shù)組的長(zhǎng)度
arr//[1, 2, 3, 4, 1]

結(jié)尾出入棧:
1、入棧:arr.push(值)
將值壓入數(shù)組結(jié)尾

⑧:pop():刪除一個(gè)數(shù)組中的最后一個(gè)元素属愤,并且返回這個(gè)元素女器;

var arr=[1,2,3,4]
arr.pop()//4
//返回彈出的元素
arr//[1,2,3]

出棧:var last=arr.pop();
彈出數(shù)組最后一個(gè)元素

⑨:unshift():在數(shù)組開始出插入一些元素,并返回?cái)?shù)組新的長(zhǎng)度住诸;

var arr=[1,2,3,4]
arr.unshift(22)//5
arr//[22, 1, 2, 3, 4]

開頭出入棧:
1驾胆、入棧:arr.unshift(值);
將值插入數(shù)組開頭

⑩:shift():刪除數(shù)組的第一個(gè)元素,并返回這個(gè)元素贱呐;

var arr=[1,2,3,4]
arr.shift()//1
arr//[2, 3, 4]

出棧:var first=arr.shift();
取出數(shù)組第一個(gè)元素

2018.9.17過濾器丧诺;計(jì)算屬性

全局過濾器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='itany'>
       <p>{{2|addZero}}</p>  
   </div>
    <script src="vue.js"></script>
    <script>
       Vue.filter('addZero',function(data){
           if(data<10){
               return '0'+data;
           }else{
               return data;
           }
       }) 
       new Vue({
           el:'#itany'
       })
    
    </script>
</body>
</html>

屏幕展示:個(gè)位數(shù)0開頭
1.png

局部過濾器

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
        {{6|num}}
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            filters:{
                num:function(c){
                    if(c<10){
                        return '0'+c
                    }else{
                        return c
                    }
                }
            }
        })
    </script>
</body>
</html>

屏幕展示:個(gè)位數(shù)0開頭

保留兩位小數(shù)(toFixed(2))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='itany'>
       <p>{{123.41233|number}}</p>
   </div>
    <script src='vue.js'></script>
    <script>
//       Vue.filter("number",function(data){
//           return data.toFixed(2)
//       }) //全局過濾器
       new Vue({
            el:'#itany',
            filters:{
                number:function(data){
                    return data.toFixed(2)
                }
            }
       })//部分過濾器
    </script>
</body>
</html>

屏幕展示:保留兩位小數(shù)(四舍五入)
2.png

日期計(jì)時(shí)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id='itany'>
      <p>{{new Date()|date}}</p>
  </div>
   <script src='vue.js'></script> 
   <script>
     Vue.filter("date",function(data){
         return  data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+
             '日,星期'+data.getDay()+','+data.getHours()+'點(diǎn)'+data.getMinutes()+'分'+data.getSeconds()+'秒';
     })  
     new Vue({
         el:'#itany'  
     })
   </script>
</body>
</html>

屏幕展示:刷新屏幕隨著時(shí)間變而變
3.png

計(jì)算屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='itany'>
       <h1>{{msg.split(' ').reverse().join('===')}}</h1>
       <a href="#">{{count}}</a>
   </div>
    <script src='vue.js'></script>
    <script>
    
       new Vue({
           el:'#itany',
           data:{
               msg:'hello vue'
           },
           computed:{//計(jì)算屬性
               count:function(){
                   return this.msg.split(' ').reverse().join('===')
               }
           }
       })
    </script>
</body>
</html>

屏幕展示:
4.png

計(jì)算屬性 求和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id='itany'>
     <button @click='add'>加貨</button>
      <h1>{{total}}</h1>
  </div>
   <script src='vue.js'></script> 
   <script>
    
       new Vue({
           el:'#itany',
           data:{
               package1:{price:2,count:3},
               package2:{price:4,count:6}
           },
           computed:{
               total:function(){
                   return this.package1.price*this.package1.count+this.package2.price*this.package2.count
               }
           },
           methods:{
               add:function(){
                   this.package1.count++;
               }
           }
           
       })
    </script>
</body>
</html>

屏幕顯示:點(diǎn)擊按鈕即加
5.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市奄薇,隨后出現(xiàn)的幾起案子驳阎,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件呵晚,死亡現(xiàn)場(chǎng)離奇詭異蜘腌,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)劣纲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門逢捺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人癞季,你說我怎么就攤上這事劫瞳。” “怎么了绷柒?”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵志于,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我废睦,道長(zhǎng)伺绽,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任嗜湃,我火速辦了婚禮奈应,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘购披。我一直安慰自己杖挣,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開白布刚陡。 她就那樣靜靜地躺著惩妇,像睡著了一般。 火紅的嫁衣襯著肌膚如雪筐乳。 梳的紋絲不亂的頭發(fā)上歌殃,一...
    開封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音蝙云,去河邊找鬼氓皱。 笑死,一個(gè)胖子當(dāng)著我的面吹牛勃刨,可吹牛的內(nèi)容都是我干的波材。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼朵你,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼各聘!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起抡医,我...
    開封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤躲因,失蹤者是張志新(化名)和其女友劉穎早敬,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體大脉,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡搞监,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了镰矿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片琐驴。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖秤标,靈堂內(nèi)的尸體忽然破棺而出绝淡,到底是詐尸還是另有隱情,我是刑警寧澤苍姜,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布牢酵,位于F島的核電站,受9級(jí)特大地震影響衙猪,放射性物質(zhì)發(fā)生泄漏馍乙。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一垫释、第九天 我趴在偏房一處隱蔽的房頂上張望丝格。 院中可真熱鬧,春花似錦棵譬、人聲如沸显蝌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽琅束。三九已至扭屁,卻和暖如春算谈,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背料滥。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工然眼, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人葵腹。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓高每,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親践宴。 傳聞我的和親對(duì)象是個(gè)殘疾皇子鲸匿,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容