Vue——計(jì)算屬性&偵聽(tīng)器&過(guò)濾器

好看的網(wǎng)頁(yè)千篇一律,有趣的代碼萬(wàn)里挑一署隘。

今天一起學(xué)習(xí):計(jì)算屬性&偵聽(tīng)器&過(guò)濾器


1. 綁定樣式

<div id="app">

? ? ? ? <button @click="bg_b=true">顯示藍(lán)色背景</button>

? ? ? ? <button @click="c_w=true">顯示白色字體</button>

? ? ? ? <!-- :class可以綁定一個(gè)對(duì)象蘑秽,對(duì)象的屬性名是類(lèi)選擇器的名稱(chēng)饺著,屬性值返回true,表示添加該選擇器肠牲。 -->

? ? ? ? <div :class="{bg_b:bg_b,c_w:c_w}">好好學(xué)習(xí)Vue</div>

? ? ? ? <button @click="arr.push('bg_p')">顯示粉色背景</button>

? ? ? ? <button @click="arr.push('c_g')">顯示綠色字體</button>

? ? ? ? <!-- :class可以綁定字符串一個(gè)數(shù)組幼衰,數(shù)組中的每一個(gè)元素就是一個(gè)選擇器 -->

? ? ? ? <div :class="arr">好好學(xué)習(xí)Vue</div>

? ? ? ? <!-- :class可以直接綁定一個(gè)表示 -->

? ? ? ? <div :class="bg_b?'bg_b':''">好好學(xué)習(xí)Vue</div>

? ? ? ? <!-- :class也可以通過(guò)數(shù)組綁定多個(gè)表達(dá)式 -->

? ? ? ? <div :class="[bg_b?'bg_b':'',c_w?'c_w':'']">好好學(xué)習(xí)Vue</div>

? ? ? ? <hr>

? ? ? ? <p>背景色:<input type="text" v-model="bgc"></p>

? ? ? ? <p>字體色:<input type="text" v-model="c"></p>

? ? ? ? <!-- :class是綁定類(lèi)選擇器,:style是綁定內(nèi)聯(lián)樣式缀雳。

? ? :style通常也是綁定一個(gè)對(duì)象渡嚣,對(duì)象的屬性名是原生CSS的屬性名,但是要采用小駝峰命名規(guī)范。 -->

? ? ? ? <div :style="{backgroundColor:bgc,color:c}">好好學(xué)習(xí)Vue</div>

? ? ? ? <br>

? ? ? ? <!-- 小練習(xí):實(shí)現(xiàn)點(diǎn)誰(shuí)识椰,誰(shuí)高亮 -->

? ? ? ? <ul>

? ? ? ? ? ? <li @click="activeIndex=index" v-for="(item,index) in list" :key="index"

? ? ? ? ? ? ? ? :class="{active:activeIndex===index}">{{item}}</li>

? ? ? ? </ul>

? ? </div>

2. 計(jì)算屬性

?new Vue({

? ? ? ? el:'#app',

? ? ? ? data() {

? ? ? ? ? ? return {

? ? ? ? ? ? ? ? // 是否顯示藍(lán)色背景

? ? ? ? ? ? ? ? bg_b:false,

? ? ? ? ? ? ? ? // 是否顯示白色字體

? ? ? ? ? ? ? ? c_w:false,

? ? ? ? ? ? ? ? // 該數(shù)組中绝葡,用于存儲(chǔ)類(lèi)選擇器的名稱(chēng)

? ? ? ? ? ? ? ? arr:[],

? ? ? ? ? ? ? ? // 定義背景色

? ? ? ? ? ? ? ? bgc:'orange',

? ? ? ? ? ? ? ? // 定義字體顏色

? ? ? ? ? ? ? ? c:'red',

? ? ? ? ? ? ? ? list:['保時(shí)捷','瑪莎拉蒂','雷克薩斯','吉利'],

? ? ? ? ? ? ? ? // 定義一個(gè)高亮索引

? ? ? ? ? ? ? ? activeIndex:0

? ? ? ? ? ? }

? ? ? ? },

? ? })

?new Vue({

? ? ? ? el:'#app',

? ? ? ? data() {

? ? ? ? ? ? return {

? ? ? ? ? ? ? ? firstName:'王',

? ? ? ? ? ? ? ? lastName:'瑞',

? ? ? ? ? ? ? ? students:[

? ? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? ? ? name:'張三',

? ? ? ? ? ? ? ? ? ? ? ? sex:'男',

? ? ? ? ? ? ? ? ? ? ? ? age:12

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? ? ? name:'李四',

? ? ? ? ? ? ? ? ? ? ? ? sex:'女',

? ? ? ? ? ? ? ? ? ? ? ? age:13

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? ? ? name:'王五',

? ? ? ? ? ? ? ? ? ? ? ? sex:'男',

? ? ? ? ? ? ? ? ? ? ? ? age:15

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ]

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? methods: {

? ? ? ? ? ? // 定義一個(gè)方法,返回姓名

? ? ? ? ? ? getName(){

? ? ? ? ? ? ? ? return this.firstName+'.'+this.lastName

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? // 計(jì)算屬性腹鹉,計(jì)算屬性本質(zhì)上其實(shí)是方法

? ? ? ? computed:{

? ? ? ? ? ? // 在這里藏畅,我們定義的是方法,只不過(guò)這方法在模板中种蘸,可以當(dāng)做屬性來(lái)使用

? ? ? ? ? ? fullName(){

? ? ? ? ? ? ? ? return this.firstName+'.'+this.lastName

? ? ? ? ? ? },

? ? ? ? ? ? // 計(jì)算屬性的簡(jiǎn)單寫(xiě)法墓赴,就是定義一個(gè)方法,由該方法返回出去一份結(jié)果航瞭,所有它是只讀的诫硕。

? ? ? ? ? ? // 如果要修改計(jì)算屬性的值,就要使用完整的寫(xiě)法

? ? ? ? ? ? fullName2:{

? ? ? ? ? ? ? ? // get方法刊侯,返回計(jì)算屬性的結(jié)果

? ? ? ? ? ? ? ? get(){

? ? ? ? ? ? ? ? ? ? return this.firstName+'.'+this.lastName

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? // set方法章办,修改計(jì)算屬性的結(jié)果,該方法接收一個(gè)參數(shù)是最新的值

? ? ? ? ? ? ? ? set(val){

? ? ? ? ? ? ? ? ? ? if(val.indexOf('.')!==0){

? ? ? ? ? ? ? ? ? ? ? ? let arr = val.split('.')

? ? ? ? ? ? ? ? ? ? ? ? this.firstName = arr[0]

? ? ? ? ? ? ? ? ? ? ? ? this.lastName = arr[1]

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? // 計(jì)算學(xué)生的平均年齡

? ? ? ? ? ? avgAge(){

? ? ? ? ? ? ? ? return (this.students.reduce((c,s)=>{

? ? ? ? ? ? ? ? ? ? return c+s.age

? ? ? ? ? ? ? ? },0) / this.students.length).toFixed(2)

? ? ? ? ? ? }

? ? ? ? }

? ? })


3. 數(shù)據(jù)偵聽(tīng)器

?<div id="app">

? ? ? ? <p>姓名:<input type="text" v-model="name"></p>

? ? ? ? <p>年齡:<input type="text" v-model="age"></p>

? ? ? ? <hr>

? ? ? ? <p>員工姓名:<input type="text" v-model="emp.name"></p>

? ? ? ? <p>員工年齡:<input type="text" v-model="emp.age"></p>

? ? ? ? <p>員工汽車(chē)名稱(chēng):<input type="text" v-model="emp.car.name"></p>

? ? ? ? <p>員工汽車(chē)價(jià)格:<input type="text" v-model="emp.car.price"></p>

? ? </div>

? ? new Vue({

? ? ? ? el:'#app',

? ? ? ? data() {

? ? ? ? ? ? return {

? ? ? ? ? ? ? ? name:'王瑞',

? ? ? ? ? ? ? ? age:20,

? ? ? ? ? ? ? ? // 定義一個(gè)對(duì)象

? ? ? ? ? ? ? ? emp:{

? ? ? ? ? ? ? ? ? ? name:'張勇杰',

? ? ? ? ? ? ? ? ? ? age:20,

? ? ? ? ? ? ? ? ? ? // 員工的汽車(chē)對(duì)象

? ? ? ? ? ? ? ? ? ? car:{

? ? ? ? ? ? ? ? ? ? ? ? name:'奔馳',

? ? ? ? ? ? ? ? ? ? ? ? price:'50W'

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? // 偵聽(tīng)器

? ? ? ? watch:{

? ? ? ? ? ? // 要偵聽(tīng)哪個(gè)屬性滨彻,就以那個(gè)屬性的名稱(chēng)為方法名藕届,定義一個(gè)方法,

? ? ? ? ? ? // 當(dāng)屬性的值發(fā)生變化時(shí),該方法就會(huì)執(zhí)行亭饵。

? ? ? ? ? ? // 該方法休偶,有兩個(gè)參數(shù),第一個(gè)參數(shù)是新值辜羊,第二參數(shù)是舊值

? ? ? ? ? ? name(nval,oval){

? ? ? ? ? ? ? ? console.log('name屬性值發(fā)生變化了',nval,oval);

? ? ? ? ? ? },

? ? ? ? ? ? // 偵聽(tīng)emp對(duì)象是否發(fā)生了變化

? ? ? ? ? ? // 如果要實(shí)現(xiàn)深度偵聽(tīng)對(duì)象的變化踏兜,就需要使用完整的寫(xiě)法,定義一個(gè)對(duì)象

? ? ? ? ? ? // 在對(duì)象中八秃,通過(guò)deep屬性設(shè)置深度監(jiān)視

? ? ? ? ? ? emp:{

? ? ? ? ? ? ? ? // 深度監(jiān)視

? ? ? ? ? ? ? ? deep:true,

? ? ? ? ? ? ? ? // 設(shè)置監(jiān)視器碱妆,默認(rèn)執(zhí)行一次

? ? ? ? ? ? ? ? immediate:true,

? ? ? ? ? ? ? ? // 通過(guò)handler定義監(jiān)視器的方法

? ? ? ? ? ? ? ? handler(nval,oval){

? ? ? ? ? ? ? ? ? ? console.log('員工信息發(fā)生變化了',nval,oval);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

? ? })


4. 過(guò)濾器

<!-- 第一個(gè)容器 -->

<div id="app">

? ? <h2>{{goods1.name}}</h2>

? ? <h4>價(jià)格:{{rmb_price}}</h4>

? ? <h4>價(jià)格:{{us_price}}</h4>

? ? <h4>價(jià)格:{{goods1.price | toRMB}}</h4>

? ? <h4>價(jià)格:{{goods1.price | toUS}}</h4>

? ? <hr>

? ? <h2>{{goods2.name}}</h2>

? ? <!-- 過(guò)濾器只能在插值表達(dá)式 和 ?v-bind表達(dá)式中使用。通過(guò)“管道符” | 指定使用具體的過(guò)濾器昔驱。

? ? 原理就是將“管道符”左邊的值傳給“管道符”右邊的方法去處理疹尾,并返回處理過(guò)后的結(jié)果。 -->

? ? <h4>價(jià)格:{{goods2.price | toRMB}} <input type="text" :value="goods2.price | toRMB"></h4>

? ? <h4>價(jià)格:{{goods2.price | toUS}} <input type="text" :value="goods2.price | toUS"></h4>

</div>

<div>=================================================</div>

<!-- 第二個(gè)容器 -->

<div id="app2">

? ? <h2>{{goods1.name}}</h2>

? ? <h4>價(jià)格:{{goods1.price | toRMB}}</h4>

? ? <h4>價(jià)格:{{goods1.price | toUS}}</h4>

? ? <h2>{{message}}</h2>

? ? <h2>{{message | strReverse}}</h2>

</div>

// 定義過(guò)濾器有兩種方式:局部過(guò)濾器骤肛,全局過(guò)濾器

// 局部過(guò)濾器纳本,只是當(dāng)前Vue實(shí)例可以訪問(wèn)

// 全局過(guò)濾器,所有的Vue實(shí)例都可以訪問(wèn)

Vue.filter('toRMB', function(val){

? ? return '¥'+val.toFixed(2)

})

Vue.filter('toUS', function(val){

? ? return '$'+(val/6.4634).toFixed(2)

})

Vue.filter('strReverse', function(val){

? ? return val.split('').reverse().join('')

})

// 該Vue實(shí)例操作第一個(gè)容器

new Vue({

? ? el:'#app',

? ? data() {

? ? ? ? return {

? ? ? ? ? ? // 商品一

? ? ? ? ? ? goods1:{

? ? ? ? ? ? ? ? name:'蘋(píng)果手機(jī)',

? ? ? ? ? ? ? ? price:8666,

? ? ? ? ? ? },

? ? ? ? ? ? // 商品二

? ? ? ? ? ? goods2:{

? ? ? ? ? ? ? ? name:'小米電視',

? ? ? ? ? ? ? ? price:8848

? ? ? ? ? ? }

? ? ? ? }

? ? },

? ? computed:{

? ? ? ? // 定義一個(gè)計(jì)算屬性腋颠,返回人民幣價(jià)格

? ? ? ? // 計(jì)算屬性一般用于針對(duì)性的計(jì)算繁成,假設(shè)我們有很多數(shù)據(jù)要計(jì)算,就不太方便了秕豫。

? ? ? ? rmb_price(){

? ? ? ? ? ? return '¥'+this.goods1.price.toFixed(2)

? ? ? ? },

? ? ? ? // 定義一個(gè)計(jì)算屬性朴艰,返回美金價(jià)格

? ? ? ? us_price(){

? ? ? ? ? ? return '$'+(this.goods1.price/6.4634).toFixed(2)

? ? ? ? }

? ? },

? ? // 定義過(guò)濾器 (局部過(guò)濾器观蓄,里面定義的過(guò)濾器只是當(dāng)前Vue實(shí)例可以訪問(wèn))

? ? /* filters:{

? ? ? ? // 每個(gè)過(guò)濾器其實(shí),也是一個(gè)方法祠墅,該方法接收一個(gè)參數(shù)侮穿。

? ? ? ? // 對(duì)參數(shù)進(jìn)行過(guò)濾,然后重新返回毁嗦。

? ? ? ? toRMB(val){

? ? ? ? ? ? return '¥'+val.toFixed(2)

? ? ? ? ?},

? ? ? ? ?toUS(val){

? ? ? ? ? ? return '$'+(val/6.4634).toFixed(2)

? ? ? ? ?}

? ? ?} */

})

// 該Vue實(shí)例操作第二個(gè)容器

new Vue({

? ? el:'#app2',

? ? data() {

? ? ? ? return {

? ? ? ? ? ? // 商品一

? ? ? ? ? ? goods1:{

? ? ? ? ? ? ? ? name:'娃哈哈奶茶',

? ? ? ? ? ? ? ? price:25

? ? ? ? ? ? },

? ? ? ? ? ? message:'歡迎光臨本店亲茅,所有商品一律8折'

? ? ? ? }

? ? },

})

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市狗准,隨后出現(xiàn)的幾起案子克锣,更是在濱河造成了極大的恐慌,老刑警劉巖腔长,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件袭祟,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡捞附,警方通過(guò)查閱死者的電腦和手機(jī)巾乳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)鸟召,“玉大人胆绊,你說(shuō)我怎么就攤上這事∨纺迹” “怎么了压状?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)跟继。 經(jīng)常有香客問(wèn)我种冬,道長(zhǎng),這世上最難降的妖魔是什么还栓? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任碌廓,我火速辦了婚禮传轰,結(jié)果婚禮上剩盒,老公的妹妹穿的比我還像新娘。我一直安慰自己慨蛙,他們只是感情好辽聊,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著期贫,像睡著了一般跟匆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上通砍,一...
    開(kāi)封第一講書(shū)人閱讀 51,679評(píng)論 1 305
  • 那天玛臂,我揣著相機(jī)與錄音烤蜕,去河邊找鬼。 笑死迹冤,一個(gè)胖子當(dāng)著我的面吹牛讽营,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播泡徙,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼橱鹏,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了堪藐?” 一聲冷哼從身側(cè)響起莉兰,我...
    開(kāi)封第一講書(shū)人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎礁竞,沒(méi)想到半個(gè)月后糖荒,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡模捂,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年寂嘉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片枫绅。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡泉孩,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出并淋,到底是詐尸還是另有隱情寓搬,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布县耽,位于F島的核電站句喷,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏兔毙。R本人自食惡果不足惜唾琼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望澎剥。 院中可真熱鬧锡溯,春花似錦、人聲如沸哑姚。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)叙量。三九已至倡蝙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間绞佩,已是汗流浹背寺鸥。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工猪钮, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人胆建。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓躬贡,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親眼坏。 傳聞我的和親對(duì)象是個(gè)殘疾皇子拂玻,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

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