计算属性-vue

计算属性-vue

<!-- calculation_properties.vue -->
<template>
  <h3>{{ items.name }}</h3>
  <!-- <p>{{ Object.keys(items.content).length > 0 ? 'Yes':'No' }}</p> 原始的操作态 -->
  <p>{{ computedcontect }}</p> ## 计算属性的操作态

</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
const items = ref({
  name: '张三',
  age: 18,
  sex: '男',
  content:{"name":"张三","age":18,"sex":"男"}
})
const computedcontect = computed(() => {
  // 计算属性
  // 这里的items是一个ref对象，所以需要使用.value来访问它的值
  console.log('计算属性', items.value);
  return Object.keys(items.value.content).length > 0 ? 'Yes' : 'No';
})
</script>