Rumah hujung hadapan web tutorial js vue中的计算属性的使用方法

vue中的计算属性的使用方法

Dec 12, 2017 pm 01:07 PM
Cara menggunakan mengira

计算属性

在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。本文主要介绍vue计算属性的使用和vue实例的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家。

vue 计算属性

当我们想要根据一端业务代码的执行结果来返回属性的值,就可以使用计算属性computed了,

计算属性是一个有结果的函数,有get方法和set方法,get方法,必须有返回值必须有返回值

<script src="lib/vue.js"></script> 
 
<body> 
<p id="box"> 
  a = >{{a}} 
  b = > {{b}} 
</p> 
</body> 
<script> 
  var vm = new Vue({ 
    el:&#39;#box&#39;, 
    data:{ 
      a:1 
    }, 
    computed:{ 
      b:function () { 
        //业务代码 
        return this.a+1; 
      } 
    } 
  }); 
  /**这样直接改属性的值不行的,需要调用计算属性的set方法**/ 
  document.onclick = function(){ 
    vm.b = 3; 
  }; 
</script>
Salin selepas log masuk

计算属性的set/get方法:

<script src="lib/vue.js"></script> 
 
<body> 
<p id="box"> 
  a = >{{a}} 
  b = > {{b}} 
</p> 
</body> 
<script> 
  var vm = new Vue({ 
    el:&#39;#box&#39;, 
    data:{ 
      a:1 
    }, 
    computed:{ 
      b:{ 
        get:function () { 
          return this.a+1; 
        }, 
        set:function(val){ 
          this.a = val; 
        } 
      } 
    } 
  }); 
  /**这样直接改属性的值不行的,需要调用计算属性的set方法**/ 
  document.onclick = function(){ 
    vm.b = 3; 
    //默认调用计算属性的set方法 
  }; 
</script>
Salin selepas log masuk

vue实例的简单方法

vm 是创建的vue实例对象的名字

vm.$el -> 就是元素

vm.$data -> 就是data

vm.$mount -> 将vue对象挂载在节点对象上

举个例子:

var vm2 = new Vue({ 
    data:{}, 
    methods:{} 
  }).$mount(&#39;#box&#39;);
Salin selepas log masuk

等同于:

var vm2 = new Vue({ 
    el:&#39;#box&#39;, 
    data:{}, 
    methods:{} 
  });
Salin selepas log masuk

vm.$options -> 获取自定义属性,自定义方法

vue实例可以自定义属性和方法,如果需要调用就需要$options调用,举例如下:

var vm2 = new Vue({ 
   aa:&#39;1&#39;,//自定义属性 
   show:function () { 
     alert(1); 
   }, 
   el:&#39;#box&#39;, 
   data:{}, 
   methods:{} 
 }); 
 vm2.$options.show(); 
 console.log(vm2.$options.aa);
Salin selepas log masuk

vm.$destroy ->   销毁对象

vm.$log();  ->  查看现在数据的状态

相关推荐:

关于Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值详解

Vue.js划分组件的实现方法介绍

Vue.js组件通信中的几种姿势具体分析

Atas ialah kandungan terperinci vue中的计算属性的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menggunakan alat pembaikan DirectX? Penggunaan terperinci alat pembaikan DirectX Bagaimana untuk menggunakan alat pembaikan DirectX? Penggunaan terperinci alat pembaikan DirectX Mar 15, 2024 am 08:31 AM

Alat pembaikan DirectX ialah alat sistem profesional Fungsi utamanya adalah untuk mengesan status DirectX sistem semasa Jika keabnormalan ditemui, ia boleh dibaiki secara langsung. Mungkin terdapat ramai pengguna yang tidak tahu cara menggunakan alat pembaikan DirectX Mari kita lihat tutorial terperinci di bawah. 1. Gunakan perisian alat pembaikan untuk melakukan pengesanan pembaikan. 2. Jika ia menggesa bahawa terdapat masalah tidak normal dalam komponen C++ selepas pembaikan selesai, sila klik butang Batal dan kemudian klik bar menu Alat. 3. Klik butang Pilihan, pilih sambungan, dan klik butang Mulakan Sambungan. 4. Selepas pengembangan selesai, mengesan semula dan membaikinya. 5. Jika masalah masih tidak diselesaikan selepas operasi alat pembaikan selesai, anda boleh cuba menyahpasang dan memasang semula program yang melaporkan ralat.

Pendaraban matriks universal CUDA: dari kemasukan kepada kemahiran! Pendaraban matriks universal CUDA: dari kemasukan kepada kemahiran! Mar 25, 2024 pm 12:30 PM

Pendaraban Matriks Umum (GEMM) ialah bahagian penting dalam banyak aplikasi dan algoritma, dan juga merupakan salah satu petunjuk penting untuk menilai prestasi perkakasan komputer. Penyelidikan mendalam dan pengoptimuman pelaksanaan GEMM boleh membantu kami lebih memahami pengkomputeran berprestasi tinggi dan hubungan antara perisian dan sistem perkakasan. Dalam sains komputer, pengoptimuman GEMM yang berkesan boleh meningkatkan kelajuan pengkomputeran dan menjimatkan sumber, yang penting untuk meningkatkan prestasi keseluruhan sistem komputer. Pemahaman yang mendalam tentang prinsip kerja dan kaedah pengoptimuman GEMM akan membantu kami menggunakan potensi perkakasan pengkomputeran moden dengan lebih baik dan menyediakan penyelesaian yang lebih cekap untuk pelbagai tugas pengkomputeran yang kompleks. Dengan mengoptimumkan prestasi GEMM

Cara mengira penambahan, penolakan, pendaraban dan pembahagian dalam dokumen perkataan Cara mengira penambahan, penolakan, pendaraban dan pembahagian dalam dokumen perkataan Mar 19, 2024 pm 08:13 PM

WORD adalah pemproses perkataan yang berkuasa Kita boleh menggunakan perkataan untuk mengedit pelbagai teks Dalam jadual Excel, kita telah menguasai kaedah pengiraan penambahan, penolakan dan penggandaan Jadi jika kita perlu mengira penambahan nilai dalam jadual Word. Bagaimana untuk menolak pengganda? Bolehkah saya hanya menggunakan kalkulator untuk mengiranya? Jawapannya sudah tentu tidak, WORD juga boleh melakukannya. Hari ini saya akan mengajar anda cara menggunakan formula untuk mengira operasi asas seperti penambahan, penolakan, pendaraban dan pembahagian dalam jadual dalam dokumen Word. Jadi, hari ini izinkan saya menunjukkan secara terperinci cara mengira penambahan, penolakan, pendaraban dan pembahagian dalam dokumen WORD? Langkah 1: Buka WORD, klik [Jadual] di bawah [Sisipkan] pada bar alat dan masukkan jadual dalam menu lungsur.

Pengenalan kepada kod status HTTP 525: teroka definisi dan aplikasinya Pengenalan kepada kod status HTTP 525: teroka definisi dan aplikasinya Feb 18, 2024 pm 10:12 PM

Pengenalan kepada kod status HTTP 525: Fahami definisi dan penggunaan kod status HTTP (HypertextTransferProtocol) 525 bermakna pelayan mempunyai ralat semasa proses jabat tangan SSL, mengakibatkan ketidakupayaan untuk mewujudkan sambungan selamat. Pelayan mengembalikan kod status ini apabila ralat berlaku semasa jabat tangan Keselamatan Lapisan Pengangkutan (TLS). Kod status ini termasuk dalam kategori ralat pelayan dan biasanya menunjukkan konfigurasi pelayan atau masalah persediaan. Apabila pelanggan cuba menyambung ke pelayan melalui HTTPS, pelayan tidak mempunyai

Cara menggunakan Baidu Netdisk-Cara menggunakan Baidu Netdisk Cara menggunakan Baidu Netdisk-Cara menggunakan Baidu Netdisk Mar 04, 2024 pm 09:28 PM

Ramai rakan masih tidak tahu cara menggunakan Baidu Netdisk, jadi editor akan menerangkan cara menggunakan Baidu Netdisk di bawah Jika anda memerlukan, cepat dan lihat. Langkah 1: Log masuk terus selepas memasang Baidu Netdisk (seperti yang ditunjukkan dalam gambar Langkah 2: Kemudian pilih "Perkongsian Saya" dan "Senarai Pemindahan" mengikut arahan halaman (seperti yang ditunjukkan dalam gambar); Perkongsian Rakan", anda boleh berkongsi gambar dan fail terus dengan rakan (seperti yang ditunjukkan dalam gambar); Langkah 4: Kemudian pilih "Kongsi" dan kemudian pilih fail komputer atau fail cakera rangkaian (seperti yang ditunjukkan dalam gambar); Langkah Kelima 1: Kemudian anda boleh mencari rakan (seperti yang ditunjukkan dalam gambar) Langkah 6: Anda juga boleh mencari fungsi yang anda perlukan dalam "Function Treasure Box" (seperti yang ditunjukkan dalam gambar). Perkara di atas adalah pendapat editor

Belajar menyalin dan menampal dengan cepat Belajar menyalin dan menampal dengan cepat Feb 18, 2024 pm 03:25 PM

Cara menggunakan kekunci pintasan salin-tampal Salin-tampal ialah operasi yang sering kita hadapi apabila menggunakan komputer setiap hari. Untuk meningkatkan kecekapan kerja, adalah sangat penting untuk menguasai kekunci pintasan salin dan tampal. Artikel ini akan memperkenalkan beberapa kekunci pintasan salin dan tampal yang biasa digunakan untuk membantu pembaca melaksanakan operasi salin dan tampal dengan lebih mudah. Kekunci pintasan salin: Ctrl+CCtrl+C ialah kekunci pintasan untuk menyalin Dengan menahan kekunci Ctrl dan kemudian menekan kekunci C, anda boleh menyalin teks, fail, gambar, dsb. ke papan keratan. Untuk menggunakan kekunci pintasan ini,

Apakah alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Apakah alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Mar 18, 2024 am 11:07 AM

Alat Pengaktifan KMS ialah alat perisian yang digunakan untuk mengaktifkan produk Microsoft Windows dan Office. KMS ialah singkatan kepada KeyManagementService, iaitu perkhidmatan pengurusan utama. Alat pengaktifan KMS mensimulasikan fungsi pelayan KMS supaya komputer boleh menyambung ke pelayan KMS maya untuk mengaktifkan produk Windows dan Office. Alat pengaktifan KMS bersaiz kecil dan berkuasa dalam fungsi Ia boleh diaktifkan secara kekal dengan satu klik Ia boleh mengaktifkan mana-mana versi sistem tetingkap dan mana-mana versi perisian Office tanpa disambungkan ke Internet dan alat pengaktifan Windows yang kerap dikemas kini Hari ini saya akan memperkenalkannya Biar saya memperkenalkan kepada anda kerja pengaktifan kms

Cara menggabungkan sel menggunakan kekunci pintasan Cara menggabungkan sel menggunakan kekunci pintasan Feb 26, 2024 am 10:27 AM

Cara menggunakan kekunci pintasan untuk menggabungkan sel Dalam kerja harian, kita selalunya perlu mengedit dan memformat jadual. Menggabungkan sel ialah operasi biasa yang boleh menggabungkan berbilang sel bersebelahan ke dalam satu sel untuk meningkatkan keindahan jadual dan kesan paparan maklumat. Dalam perisian hamparan arus perdana seperti Microsoft Excel dan Helaian Google, operasi penggabungan sel adalah sangat mudah dan boleh dicapai melalui kekunci pintasan. Berikut akan memperkenalkan penggunaan kekunci pintasan untuk menggabungkan sel dalam kedua-dua perisian ini. wujud

See all articles