如何在 Vue.js 中创建回文检查

Question

我用 JavaScript 写了一个回文检查器，但我不知道如何在 Vue 中使用它。我想要的是这样的：

当我输入一个字符串时，它会说“是”或“否”及其颜色属性和值。

Answer 1

您可以使用palindrome()类中的函数：创建一个数据道具来保存用户输入（例如， named input），并绑定<v-text-field> v-model到它。使用您在问题中提到的函数，创建一个返回是否为回文的计算道具（例如， named ）。isPalindromeinput使用样式绑定应用color基于isPalindrome.使用字符串插值来显示用户输入是否为回文，基于isPalindrome.<template>  <v-row>    <v-text-field label="Palindrome" v-model="input" 1️⃣ />    <span :style="{ color: isPalindrome ? 'green' : 'red' }" 3️⃣>      {{ isPalindrome ? 'Yes' : 'No' }} 4️⃣    </span>  </v-row></template><script>import { Component, Vue } from 'vue-property-decorator'function palindrome(str: String) { /*...*/ }@Componentexport default class Palindrome extends Vue {  input = '' // 1️⃣  get isPalindrome() { // 2️⃣    return this.input && palindrome(this.input)  }}</script>