Vue.js computed

(Vue.js 계산된 속성에서 넘어옴)

1 개요[ | ]

Vue.js Computed Properties
Vue.js 계산된 속성
Vue.js computed 속성
export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    publishedBooksMessage() {
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}


---

<div id="app">
  <p>원래의 값: "{{ message }}"</p>
  <p>계산된 값: "{{ reversedMessage }}"</p>
</div>

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    message: '안녕하세요! Vue.js!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

2 setup[ | ]

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// a computed ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>


3 같이 보기[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}