<script lang="ts" setup> import { computed, ref } from 'vue' const search = ref('') const filterTableData = computed(() => tableData.filter( (data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase()) ) ) const tableData: User[] = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', } ] </script>改写成js

转换为 JavaScript 代码

<script>
import { computed, ref } from 'vue';

const search = ref('');
const tableData = ref([
  { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }
]);

const filterTableData = computed(() => {
  return tableData.value.filter((data) => {
    return !search.value || data.name.toLowerCase().includes(search.value.toLowerCase());
  });
});
</script>

• 将 <script lang="ts" setup> 改为 <script> 以使用 JavaScript。
• 保持 import { computed, ref } from 'vue'; 不变，因为这是 Vue 3 的特性。
• 将 const search = ref(''); 和 const tableData: User[] = [...]; 改为 const search = ref(''); 和 const tableData = ref([...]);，以符合 JavaScript 的语法。
• 保持 const filterTableData = computed(...); 不变，因为它是响应式计算属性的声明。47