![](/style/images/good.png)
![](/style/images/bad.png)
Creating Computed Properties with Vue's Composition API
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
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.
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!
More Vue Tutorials
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK