成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

初學(xué)Vue(四)-- 計算屬性,監(jiān)視方法

kelvinlee / 1175人閱讀

摘要:計算屬性與監(jiān)視方法計算屬性計算屬性,顧名思義是可以計算數(shù)據(jù)的屬性,為什么要特意出個計算屬性呢,因為如果直接將兩個數(shù)據(jù)加起來的話,使用加法計負數(shù)的算雙向綁定數(shù)據(jù)時就會出現(xiàn)問題計算屬性用法代碼案例加法計算器首先計算器我們想要用戶輸入所以

計算屬性與監(jiān)視方法 計算屬性 -- computed
計算屬性,顧名思義是可以計算數(shù)據(jù)的屬性,為什么要特意出個計算屬性呢,因為vue如果直接將兩個數(shù)據(jù)加起來的話,使用加法計負數(shù)的算雙向綁定數(shù)據(jù)時就會出現(xiàn)問題
計算屬性用法 -- computed
代碼案例:加法計算器

首先計算器我們想要用戶輸入所以建立兩個雙向綁定的變量數(shù)據(jù)

computed屬性中讓函數(shù)的返回的結(jié)果賦予變量數(shù)據(jù)c

返回語句顯示轉(zhuǎn)換將兩個雙向綁定的數(shù)據(jù)轉(zhuǎn)為Number型計算后將值返回

html部分:
+
=
{{c}}

js部分:
new Vue({
    el:"body",
    data:{
        a:"",
        b:"",
    },
    computed:{
        c:function(){
            return Number(this.a)+Number(this.b);
        }
    }
})  
監(jiān)視方法 -- $watch
代碼案例:加法計算器

$watch 方法是當(dāng)監(jiān)聽的變量產(chǎn)生變化時會運行它的處理函數(shù)

這個方法是Vue 實例的方法,所以創(chuàng)建一個變量a 來儲存創(chuàng)建儲存了想要監(jiān)聽的數(shù)據(jù)的Vue實例,在Vue實例后面接這個方法也是可以的。

html部分:
+
=
{{c}}

js部分:
var a = new Vue({
    el:"body",
    data:{
        a:"",
        b:"",
        c:""
    }
})
a.$watch("a",function(){
    a.c=Number(a.a)+Number(a.b);
});
a.$watch("b",function(){
    a.c=Number(a.a)+Number(a.b);
})   

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/109956.html

相關(guān)文章

  • vue學(xué)習(xí)筆記(二)

    摘要:供用戶在相應(yīng)的階段對其進行操作。我們像下面這樣使用這個指令大多數(shù)情況下,我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個常用的參數(shù)和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實例從創(chuàng)建到銷毀的過程,稱為生命周期,共有八個階段。 這八個階段里分別有一個叫做鉤子函數(shù)的實例選項。供用戶在相應(yīng)的階段對其進行操作。 beforeCreate(){ //組件實例剛...

    klivitamJ 評論0 收藏0
  • vue學(xué)習(xí)筆記(二)

    摘要:供用戶在相應(yīng)的階段對其進行操作。我們像下面這樣使用這個指令大多數(shù)情況下,我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個常用的參數(shù)和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實例從創(chuàng)建到銷毀的過程,稱為生命周期,共有八個階段。 這八個階段里分別有一個叫做鉤子函數(shù)的實例選項。供用戶在相應(yīng)的階段對其進行操作。 beforeCreate(){ //組件實例剛...

    Pines_Cheng 評論0 收藏0
  • vue學(xué)習(xí)筆記(二)

    摘要:供用戶在相應(yīng)的階段對其進行操作。我們像下面這樣使用這個指令大多數(shù)情況下,我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個常用的參數(shù)和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實例從創(chuàng)建到銷毀的過程,稱為生命周期,共有八個階段。 這八個階段里分別有一個叫做鉤子函數(shù)的實例選項。供用戶在相應(yīng)的階段對其進行操作。 beforeCreate(){ //組件實例剛...

    ideaa 評論0 收藏0
  • vue組件初學(xué)習(xí)(一)---初學(xué)者文檔

    摘要:在有時候,組建也可以是原生的元素。簡單的說,就是組件是有結(jié)構(gòu)的有樣式的,有交互效果,有行為,信號量可以存數(shù)據(jù)。組件可以通過屬性開設(shè)置。 一、什么是組件? 組件是vue.js最強大的功能之一,它可以擴展HTML元素,封裝可以重用的代碼. 當(dāng)然,在更高的層面上,組件是自定義元素,vue.js的編譯器為它添加了特殊功能。 在有時候,組建也可以是原生的HTML元素。 簡單的說,就是組件是有結(jié)構(gòu)...

    HmyBmny 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<