Creating Computed Properties with Vue's Composition API

1 year ago

source link: https://masteringjs.io/tutorials/vue/composition-computed
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Creating Computed Properties with Vue's Composition API

Oct 10, 2022

To create a computed property with the Vue's Composition API, you should call Vue's computed() function. For example, the following code demonstrates how to create a computed property that transforms a string value to lowercase.

Vue.createApp({
  setup() {
    const name = Vue.ref('World');
    const lowercase = Vue.computed(() => name.value.toLowerCase());

    // Make sure to return your computed property
    // so your templates can use it!
    return { name, lowercase };
  },
  template: `
  <div>
    <input v-model="name">
    <div>
      Hello, {{lowercase}}
    </div>
  </div>
  `
}).mount('#app');

Below is a live example. Notice that Vue automatically updates the value of lowercase whenever name changes.

Hello, world

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!