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

Question

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

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

标签： javascriptvue.jsvuejs2

Answer 1

您可以使用palindrome()类中的函数：

1. 创建一个数据道具来保存用户输入（例如，命名input），并绑定<v-text-field> v-model到它。
2. 使用您提到的函数创建一个返回是否是回文的计算道具（例如，命名）。isPalindromeinput
3. 使用样式绑定来应用color基于isPalindrome.
4. 使用字符串插值来显示用户输入是否是回文，基于isPalindrome.

<template>
  <v-row align="center">
    <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 lang="ts">
import { Component, Vue } from 'vue-property-decorator'

function palindrome(str: String) { /*...*/ }

@Component
export default class Palindrome extends Vue {
  input = '' // 1️⃣

  get isPalindrome() { // 2️⃣
    return this.input && palindrome(this.input)
  }
}
</script>