如何在Vue.js中使用带有TypeScript的计算道具

TypeScript Vue.js

西门小宇宙

2020-03-13

关于如何使用JavaScript语言与Vue.js进行交互的文档很多,而有关TypeScript的知识则很少。问题是如果在TypeScript上写的话,如何computedvue组件中定义道具根据官方示例, computed是一个具有功能的对象,该功能将根据其依赖的道具进行缓存。这是我做的一个例子:

import Vue from 'vue';
import { Component } from "vue-property-decorator";

@Component({})
export default class ComputedDemo extends Vue {
    private firstName: string = 'John';
    private lastName: string = 'Doe';
    private computed: object = {
        fullName(): string {
            return `${this.firstName} ${this.lastName}`;
        },
    }
}

和html:

<div>
    <h1>Computed props ts demo</h1>
    <ul>
        <li>First name: {{firstName}}</li>
        <li>Last name: {{lastName}}</li>
        <li>Together: {{fullName}}</li>
    </ul>
</div>

第三个列表项不输出任何内容。请问有人computed在这种情况下如何定义吗?

第1403篇《如何在Vue.js中使用带有TypeScript的计算道具》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
理查德十三Davaid 2020.03.13

您可以使用属性访问器来声明计算的属性(https://github.com/vuejs/vue-class-component)。只要在输入中键入,就会触发该吸气剂。看例子

<template>
    <div>
        <input type="text" name="Test Value" id="" v-model="text">

        <label>{{label}}</label>
    </div>

</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";

@Component({})
export default class About extends Vue {
    private text = "test";

    get label() {
        return this.text;
    }
}
</script>

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android