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

Question

我用 JavaScript 写了一个回文检查器，但我不知道如何在 Vue 中使用它。我想要的是这样的：当我输入一个字符串时，它会说“是”或“否”及其颜色属性和值。

Answer 1

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

1. 创建一个数据道具来保存用户输入（例如， named input），并绑定<v-text-field> v-model到它。

2. 使用您在问题中提到的函数，创建一个返回是否为回文的计算道具（例如， named ）。isPalindromeinput

3. 使用样式绑定应用color基于isPalindrome.

4. 使用字符串插值来显示用户输入是否为回文，基于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) { /*...*/ }

@Component

export default class Palindrome extends Vue {

  input = '' // 1️⃣

  get isPalindrome() { // 2️⃣

    return this.input && palindrome(this.input)

  }

}

</script>