vuejs computed
xxxxxxxxxx
export default {
computed: {
// a computed getter
publishedBooksMessage() {
// `this` points to the component instance
return this.author.books.length > 0 ? 'Yes' : 'No'
}
},
data() {
return {
author: {
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
}
}
}
}
template
<p>Has published books:</p>
<span>{{ publishedBooksMessage }}</span>
https://vuejs.org/guide/essentials/computed.html#basic-example
xxxxxxxxxx
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
xxxxxxxxxx
// Vue 3 (Computed getter and setter) in script setup.
const view = ref(false)
const computedView = computed({
get: () => view.value,
set: val => {
view.value = val
}
})
xxxxxxxxxx
export default {
computed:{
test(){
return this.course.image
}
}
,
props:['course'],
}