@prop vue typescript code example
Example 1: props vue typescript
<script>
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class HelloWorld extends Vue {
@Prop() readonly msg!: string
@Prop({default: 'John doe'}) readonly name: string
@Prop({required: true}) readonly age: number
@Prop(String) readonly address: string
@Prop({required: false, type: String, default: 'Developer'}) readonly job: string
}
</script>
Example 2: computed vue typescript
<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>
<script lang="ts">
import { defineComponent, ref, computed } from "@vue/composition-api";
export default defineComponent({
setup() {
const text = ref("test");
const label = computed(() => {
return text.value;
});
return {
text,
label
};
}
});
</script>