Vue 문서의 데이터 시각화 기능 적용 예

Vue.js는 대화형 웹 사용자 인터페이스를 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. 유연한 데이터 바인딩 시스템과 구성 요소를 쉽게 구성하고 재사용할 수 있는 방법을 제공합니다.

Vue.js 문서에서는 JavaScript의 데이터 시각화 사용을 계산된 속성이라고 합니다. 이 기사에서는 Vue.js의 일부 계산된 속성을 소개하고 이를 활용하여 데이터 시각화를 사용하는 실제 애플리케이션을 만드는 방법을 보여줍니다.

계산 속성이란 무엇인가요?

계산 속성은 반응적 종속성을 기반으로 동적 데이터 바인딩 값을 계산하고 반환하는 데 사용되는 Vue.js의 특수 함수입니다. Vue.js 인스턴스에 정의된 속성을 기반으로 결과를 자동으로 업데이트합니다. 즉, 종속 속성이 변경되면 계산된 속성이 해당 값을 자동으로 다시 계산합니다. 계산된 속성의 구문은 다음과 같습니다.

computed: {
  // 计算属性的名称
  属性名: function() {
    // 计算属性的计算逻辑
    return 计算结果
  }
}

위 구문에서 계산된 속성은 속성 이름으로 정의되며 해당 값은 계산된 결과를 반환하는 함수입니다.

예를 들어 다음 Vue.js 인스턴스가 있다고 가정합니다.

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

이 예에서는 firstName과 lastName의 조합인 값을 반환하는 계산된 속성 fullName을 정의합니다.

계산 속성을 사용하여 데이터 필터링 구현

계산 속성을 사용하면 특정 조건에 따른 데이터 필터링을 더 쉽게 구현할 수 있습니다. 예를 들어 다음 Vue.js 인스턴스가 있다고 가정해 보겠습니다.

new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '任务 1', done: true },
      { text: '任务 2', done: false },
      { text: '任务 3', done: false }
    ],
    filter: 'all'
  },
  computed: {
    filteredTodos: function () {
      if (this.filter === 'all') {
        return this.todos
      } else if (this.filter === 'done') {
        return this.todos.filter(function (todo) {
          return todo.done
        })
      } else if (this.filter === 'undone') {
        return this.todos.filter(function (todo) {
          return !todo.done
        })
      }
    }
  }
})

이 예에서는 all(all), done(complete) 세 가지 값 중 하나를 사용할 수 있는 filter라는 상태 변수를 정의합니다. 실행 취소(완료되지 않음)됩니다. 또한 다양한 필터 조건에 따라 필터링된 작업 배열을 계산하고 반환하는 filteredTodos라는 계산된 속성을 정의합니다.

이제 작업 필터링을 완료하려면 다양한 필터 조건을 가리키는 버튼을 filter 속성에 바인딩하기만 하면 됩니다. 예:

<button @click="filter = 'all'">全部</button>
<button @click="filter = 'done'">已完成</button>
<button @click="filter = 'undone'">未完成</button>
<ul>
  <li v-for="todo in filteredTodos">
    {{ todo.text }}
  </li>
</ul>

이 예에서는 v-for 지시문을 사용하여 filteredTodos의 각 작업을 HTML로 렌더링합니다. 필터 조건 버튼을 클릭하면 filter에 해당 필터 조건이 할당되고 계산된 속성이 작업 목록을 다시 계산하고 업데이트합니다.

계산된 속성을 사용하여 정렬 및 필터링 구현

필터링 외에도 계산된 속성을 사용하여 실제 필요에 따라 데이터를 정렬할 수도 있습니다. 예를 들어 다음과 같은 Vue.js 인스턴스가 있다고 가정해 보겠습니다.

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'A', price: 6.5 },
      { name: 'B', price: 2 },
      { name: 'C', price: 5 },
      { name: 'D', price: 4.2 },
      { name: 'E', price: 8 },
    ],
    sortKey: 'name',
    sortReverse: false,
    filterKey: ''
  },
  computed: {
    sortedItems: function () {
      var key = this.sortKey
      var reverse = this.sortReverse ? -1 : 1

      var items = this.items.slice().sort(function (a, b) {
        a = a[key]
        b = b[key]
        return reverse * ((a > b) - (b > a))
      })

      if (this.filterKey) {
        items = items.filter(function (item) {
          return (
            item.name.toLowerCase().indexOf(this.filterKey.toLowerCase()) !== -1 ||
            item.price.toString().indexOf(this.filterKey) !== -1
          )
        }.bind(this))
      }

      return items
    }
  }
})

이 경우 items라는 상태 변수를 정의하고 각 항목에는 name 및 price라는 속성이 있습니다. 동시에 sortKey, sortReverse 및 filterKey의 세 가지 상태도 정의합니다.

또한 정렬 및 필터링 조건에 따라 항목 배열을 자동으로 계산하고 정렬하는 sortedItems라는 계산 속성을 정의합니다. 테이블 헤더를 클릭하여 정렬과 내림차순을 자동으로 전환하고 텍스트를 입력하여 배열을 필터링할 수 있습니다.

<table>
  <thead>
    <tr>
      <th>
        <button @click="sortKey = 'name'; sortReverse = !sortReverse">
          商品名称
        </button>
      </th>
      <th>
        <button @click="sortKey = 'price'; sortReverse = !sortReverse">
          商品价格
        </button>
      </th>
    </tr>
    <tr>
      <th>
        <input v-model="filterKey" placeholder="商品名称或价格" />
      </th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in sortedItems">
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
    </tr>
  </tbody>
</table>

이 예에서는 v-model 지시문을 사용하여 사용자가 입력한 필터를 구현했습니다. 또한 정렬 기준을 전환하기 위해 두 개의 버튼을 사용했습니다.

결론

계산된 속성을 사용하면 데이터 시각화가 가능한 Vue.js 애플리케이션을 쉽게 구축할 수 있습니다. 계산된 속성은 Vue.js의 반응 시스템과 상호 작용하여 데이터 필터 및 분류기를 더욱 유연하고 사용하기 쉽게 만듭니다.

데이터 시각화를 사용하여 애플리케이션을 구축할 때 계산된 속성은 데이터 조작을 구현하고 프레젠테이션을 보는 훌륭한 방법입니다. 위의 예는 Vue.js 애플리케이션에서 사용을 시작하는 데 도움이 되는 계산된 속성의 몇 가지 기본 및 고급 기능을 보여줍니다.

위 내용은 Vue 문서의 데이터 시각화 기능 적용 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!