Vue 實例屬性 計算屬性 過濾器——保留兩位小數(shù) 過濾器——獲取時間

一、vue實例屬性gfhg

1.el獲取vue綁定的元素的领铐,可以對元素的style進行操作

2.data 獲取vue實例中的數(shù)據(jù)

3.options獲取vue實例中的自定義屬性

4.refs? ? 獲取所有帶ref屬性的元素

二、計算屬性

對于比較復(fù)雜的邏輯運算,都應(yīng)該使用計算屬性

例:

<div class="itany">

? ? <p>{{mag}}</p>

? ? <h1>{{list}}</h1>

? </div>

<script src="vue.js"></script>

<script>

new Vue({

? ? ? ? el:".itany",

? ? ? ? data:{

? ? ? ? ? ? mag:'hello Vue'

? ? ? ? },

? ? ? ? ? ? computed:{

? ? ? ? ? ? list:function(){

? ? ? ? ? ? ? ? return this.mag.split(' ').reverse().join('===');

? ? ? ? ? ? }

? ? ? ? }

? ? })

</script>


三状植、過濾器——保留兩位小數(shù)

<div class="itany">

? ? <p>{{1381.322165|addZero}}</p>

</div>

<script src="vue.js"></script>

<script>

//? ? ? ? 全局

? ? ? ? Vue.filter('addZero',function(data){

? ? ? ? ? ? return data.toFixed(2);

? ? ? ? })

? ? new Vue({

? ? ? ? el:'.itany'

//? ? ? ? ? ? 局部

//? ? ? ? ? ? filters:{

//? ? ? ? ? ? ? ? addZero:function(data){

//? ? ? ? ? ? ? ? ? ? return data.toFixed(2);

//? ? ? ? ? ? ? ? }

//? ? ? ? ? ? }

? ? })


四、過濾器——獲取時間

<div class="itany">

? ? <p>{{new Date()|houers}}</p>

</div>

<script src="vue.js"></script>

<script>

? ? new Vue({

? ? ? ? el:'.itany',

? ? ? ? ? el:'.itany',

? ? ? ? filters:{

? ? ? ? ? ? houers:function(data){?

? ? ? ? ? ? return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'號,星期'+data.getDay()+";"+data.getHours()+'點'+data.getMinutes()+'分'+data.getSeconds()+'秒';

? ? }

? ? ? ? }

? ? })

</script>



計算屬性

對于比較復(fù)雜的邏輯運算,都應(yīng)該使用計算屬性津畸,以便于后期維護

例:

<!DOCTYPE html>

<html lang="en">

<head>

? ? <meta charset="UTF-8">

? ? <title>計算屬性1</title>

</head>

? <body>

<div class="itany">

<!--? ? ? 標(biāo)簽中-->

?? <h1>{{mes.split(' ').reverse().join('+++')}}</h1>

?? <!--? ? ?? 計算屬性-->

? <a href="#">{{app}}</a>

</div>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

<script>

new Vue({

? ? ? ? el:".itany",

? ? ? ? data:{

? ? ? ? ? ? mes:'Vue hello'

? ? ? ? ? ? ?? },

? ? ? ? computed:{

? ? ? ? ?? app:function(){

? ? ? ? ? ?? return this.mes.split(' ').reverse().join('+++');

? ? }

? ?? }

? })

? </script>

</body>




數(shù)組

string數(shù)組的定義有三種:

Stringarr[] =newString[10];//創(chuàng)建一個長度為10的String 類型數(shù)組振定。

Stringarr[] = {"張三","李四"};

String[] arr =newString[10];


join() 方法用于把數(shù)組中的所有元素放入一個字符串。

元素是通過指定的分隔符進行分隔的肉拓。

語法

arrayObject.join(separator)


concat() 方法用于連接兩個或多個數(shù)組后频。

該方法不會改變現(xiàn)有的數(shù)組,而僅僅會返回被連接數(shù)組的一個副本暖途。

語法

arrayObject.concat(arrayX,arrayX,......,arrayX)


slice() 方法可從已有的數(shù)組中返回選定的元素卑惜。

語法

arrayObject.slice(start,end)


Array.splice()方法是在數(shù)組中插入或刪除元素的通用方法。

不同于slice()和concat(),splice()會修改調(diào)用的元素數(shù)組驻售。


push() 方法可向數(shù)組的末尾添加一個或多個元素露久,并返回新的長度。

語法

arrayObject.push(newelement1,newelement2,....,newelementX)


unshift() 方法可向數(shù)組的開頭添加一個或更多元素欺栗,并返回新的長度毫痕。

語法

arrayObject.unshift(newelement1,newelement2,....,newelementX)


?reverse() 方法用于顛倒數(shù)組中元素的順序。

語法

arrayObject.reverse()


unshift() 方法可向數(shù)組的開頭添加一個或更多元素纸巷,并返回新的長度镇草。

語法

arrayObject.unshift(newelement1,newelement2,....,newelementX)


pop() 方法用于刪除并返回數(shù)組的最后一個元素眶痰。

語法

arrayObject.pop()


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末瘤旨,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子竖伯,更是在濱河造成了極大的恐慌存哲,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件七婴,死亡現(xiàn)場離奇詭異祟偷,居然都是意外死亡,警方通過查閱死者的電腦和手機打厘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門修肠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人户盯,你說我怎么就攤上這事嵌施。” “怎么了莽鸭?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵吗伤,是天一觀的道長。 經(jīng)常有香客問我硫眨,道長足淆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮巧号,結(jié)果婚禮上族奢,老公的妹妹穿的比我還像新娘。我一直安慰自己丹鸿,他們只是感情好歹鱼,可當(dāng)我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著卜高,像睡著了一般弥姻。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上掺涛,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天庭敦,我揣著相機與錄音,去河邊找鬼薪缆。 笑死秧廉,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的拣帽。 我是一名探鬼主播疼电,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼减拭!你這毒婦竟也來了蔽豺?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤拧粪,失蹤者是張志新(化名)和其女友劉穎修陡,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體可霎,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡魄鸦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了癣朗。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拾因。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖旷余,靈堂內(nèi)的尸體忽然破棺而出绢记,到底是詐尸還是另有隱情,我是刑警寧澤荣暮,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布庭惜,位于F島的核電站,受9級特大地震影響穗酥,放射性物質(zhì)發(fā)生泄漏护赊。R本人自食惡果不足惜惠遏,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望骏啰。 院中可真熱鬧节吮,春花似錦、人聲如沸判耕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽壁熄。三九已至帚豪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間草丧,已是汗流浹背狸臣。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留昌执,地道東北人烛亦。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像懂拾,于是被迫代替她去往敵國和親煤禽。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,627評論 2 350

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

  • 地鐵車廂 火車車廂 很久才想起滴滴 預(yù)算岖赋,緊是緊檬果,但我要支付兩個人,年輕人吃苦不要緊
    庫因塔閱讀 99評論 0 0
  • 〇贾节、何為堆棧溢出汁汗? 每次執(zhí)行JavaScript代碼時衷畦,都會分配一定尺寸的椑跬浚空間(Windows系統(tǒng)中為1M),每...
    yohn閱讀 1,532評論 0 2
  • 文/折耳貓 心慌慌 9.3是接手新班的第三天祈争,我的內(nèi)心是忐忑的斤程,總怕自己做不好。 這種心態(tài)可能就做不好了菩混,如果認(rèn)為...
    愛生活的折耳貓閱讀 1,495評論 0 0
  • 晚上沮峡,看到一些人舉行紀(jì)念路遙誕辰的活動疚脐,就想寫一份懷念。于是邢疙,就帶著一顆崇敬而純潔的心靈棍弄,重新走進他那《平凡的世界...
    人間何處問多情閱讀 1,758評論 6 28
  • 淡淡的光望薄,一點點的綻放。 寂靜的空呼畸,遙遠(yuǎn)的沒有盡頭痕支。 一層層的思,一層層的情蛮原。 進去了卧须,出去了徒河。只是如此灌砖。 呼吸的...
    霄世閱讀 173評論 0 0