爱学习IT200.cn
Search K

Appearance

在类组件中，vfd 项目会分析类方法来构建 Vuejs 组件中 methods 选项。如：在 App 组件中定义 caseSwitching 函数，用来切换 slogan 大小写。

vue
<script lang="ts">
import {Component, Vue} from 'vue-facing-decorator';
@Component({
  name: 'App',
})
export default class App extends Vue {
  // 定义类属性
  slogan = 'hello world';
  isLowerCase = true;
  
  // 定义类方法
  caseSwitching() {
    if(this.isLowerCase) {
      this.slogan = this.slogan.toUpperCase();
      this.isLowerCase = false;
    }else{
      this.slogan = this.slogan.toLowerCase()
      this.isLowerCase = true;
    }
  }
}
</script>
<template>
  {{slogan}}
  <button @click="caseSwitching">大小写切换</button>
</template>
<script lang="ts">
import {Component, Vue} from 'vue-facing-decorator';
@Component({
  name: 'App',
})
export default class App extends Vue {
  // 定义类属性
  slogan = 'hello world';
  isLowerCase = true;
  
  // 定义类方法
  caseSwitching() {
    if(this.isLowerCase) {
      this.slogan = this.slogan.toUpperCase();
      this.isLowerCase = false;
    }else{
      this.slogan = this.slogan.toLowerCase()
      this.isLowerCase = true;
    }
  }
}
</script>
<template>
  {{slogan}}
  <button @click="caseSwitching">大小写切换</button>
</template>