快捷導(dǎo)航

vue中的計(jì)算屬性的使用和vue實(shí)例的方法示例

更新時(shí)間：2017年12月04日 11:13:47 作者：再起一陣風(fēng)

本篇文章主要介紹了vue計(jì)算屬性的使用和vue實(shí)例的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了vue計(jì)算屬性的使用和vue實(shí)例的方法示例，分享給大家，具體如下：

計(jì)算屬性

在模板中表達(dá)式非常便利，但是它們實(shí)際上只用于簡(jiǎn)單的操作。模板是為了描述視圖的結(jié)構(gòu)。在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。這就是為什么 Vue.js 將綁定表達(dá)式限制為一個(gè)表達(dá)式。如果需要多于一個(gè)表達(dá)式的邏輯，應(yīng)當(dāng)使用計(jì)算屬性。

vue 計(jì)算屬性

當(dāng)我們想要根據(jù)一端業(yè)務(wù)代碼的執(zhí)行結(jié)果來(lái)返回屬性的值，就可以使用計(jì)算屬性computed了,

計(jì)算屬性是一個(gè)有結(jié)果的函數(shù),有g(shù)et方法和set方法，get方法，必須有返回值必須有返回值

<script src="lib/vue.js"></script> 
 
<body> 
<div id="box"> 
  a = >{{a}} 
  b = > {} 
</div> 
</body> 
<script> 
  var vm = new Vue({ 
    el:'#box', 
    data:{ 
      a:1 
    }, 
    computed:{ 
      b:function () { 
        //業(yè)務(wù)代碼 
        return this.a+1; 
      } 
    } 
  }); 
  /**這樣直接改屬性的值不行的，需要調(diào)用計(jì)算屬性的set方法**/ 
  document.onclick = function(){ 
    vm.b = 3; 
  }; 
</script>

計(jì)算屬性的set/get方法:

<script src="lib/vue.js"></script> 
 
<body> 
<div id="box"> 
  a = >{{a}} 
  b = > {} 
</div> 
</body> 
<script> 
  var vm = new Vue({ 
    el:'#box', 
    data:{ 
      a:1 
    }, 
    computed:{ 
      b:{ 
        get:function () { 
          return this.a+1; 
        }, 
        set:function(val){ 
          this.a = val; 
        } 
      } 
    } 
  }); 
  /**這樣直接改屬性的值不行的，需要調(diào)用計(jì)算屬性的set方法**/ 
  document.onclick = function(){ 
    vm.b = 3; 
    //默認(rèn)調(diào)用計(jì)算屬性的set方法 
  }; 
</script>

vue實(shí)例的簡(jiǎn)單方法

vm 是創(chuàng)建的vue實(shí)例對(duì)象的名字

vm.$el -> 就是元素

vm.$data -> 就是data

vm.$mount -> 將vue對(duì)象掛載在節(jié)點(diǎn)對(duì)象上

舉個(gè)例子:

var vm2 = new Vue({ 
    data:{}, 
    methods:{} 
  }).$mount('#box');

等同于:

var vm2 = new Vue({ 
    el:'#box', 
    data:{}, 
    methods:{} 
  });

vm.$options -> 獲取自定義屬性,自定義方法

vue實(shí)例可以自定義屬性和方法，如果需要調(diào)用就需要$options調(diào)用,舉例如下:

var vm2 = new Vue({ 
   aa:'1',//自定義屬性 
   show:function () { 
     alert(1); 
   }, 
   el:'#box', 
   data:{}, 
   methods:{} 
 }); 
 vm2.$options.show(); 
 console.log(vm2.$options.aa);

vm.$destroy -> 銷(xiāo)毀對(duì)象

vm.$log(); -> 查看現(xiàn)在數(shù)據(jù)的狀態(tài)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue組件通信方式(父?jìng)髯?、子傳父、兄弟通?
這篇文章主要介紹了Vue組件通信方式(父?jìng)髯印⒆觽鞲?、兄弟通?，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁(yè)面及刷新方法詳解
這篇文章主要給大家介紹了關(guān)于vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁(yè)面及刷新方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)
本文主要介紹了Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能
這篇文章主要介紹了Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能,演示如何在Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
vue 路由緩存路由嵌套路由守衛(wèi) 監(jiān)聽(tīng)物理返回操作
這篇文章主要介紹了vue 路由緩存路由嵌套路由守衛(wèi) 監(jiān)聽(tīng)物理返回操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vscode搭建vue環(huán)境完整圖文教程(適合新手小白)
Vue框架的優(yōu)秀設(shè)計(jì)和強(qiáng)大的生態(tài)系統(tǒng)成為了越來(lái)越多開(kāi)發(fā)者選擇Vue的原因,在實(shí)際項(xiàng)目過(guò)程中一個(gè)高效的開(kāi)發(fā)環(huán)境能夠大大提高開(kāi)發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode搭建vue環(huán)境的相關(guān)資料,需要的朋友可以參考下
2023-10-10
vue?中使用?this?更新數(shù)據(jù)的一次問(wèn)題記錄
這篇文章主要介紹了vue?中使用?this?更新數(shù)據(jù)的一次大坑?,我在 vue 實(shí)例中聲明了一個(gè)數(shù)組屬性如?books: []，在異步請(qǐng)求的回調(diào)函數(shù)中使用?this.books = res.data.data;?進(jìn)行數(shù)據(jù)更新，感興趣的朋友跟隨小編一起看看吧
2022-11-11
echarts.js 動(dòng)態(tài)生成多個(gè)圖表使用vue封裝組件操作
這篇文章主要介紹了echarts.js 動(dòng)態(tài)生成多個(gè)圖表使用vue封裝組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue3中defineProps及使用方法詳解
defineProps是Vue3中的一種新的組件數(shù)據(jù)傳遞方式,可以用于在子組件中定義接收哪些父組件的props,這篇文章給大家介紹vue3中defineProps及使用方法詳解,感興趣的朋友跟隨小編一起看看吧
2024-03-03
vue的url請(qǐng)求圖片的問(wèn)題及請(qǐng)求失敗解決
這篇文章主要介紹了vue的url請(qǐng)求圖片的問(wèn)題及請(qǐng)求失敗解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-09-09