vue做一个文本框能显示数据库内容

首先，你需要安装并配置好Vue和axios。然后，你可以使用axios从后端获取数据库中的数据，然后在Vue组件中使用v-model将数据绑定到文本框上。以下是一个简单的示例代码：

<template>
  <div>
    <input v-model="content" type="text">
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      content: ''
    }
  },
  mounted() {
    axios.get('/api/content').then(response => {
      this.content = response.data;
    });
  }
}
</script>

在上面的代码中，我们首先定义了一个文本框，然后使用v-model将其绑定到Vue组件的content属性上。在组件的mounted生命周期钩子中，我们使用axios向后端发送请求，获取数据库中的数据，并将其赋值给content属性。这样，当组件被渲染时，文本框中就会显示数据库中的内容。当然，你需要根据你的具体情况来修改上面的代码。

相关问题

vue生成一个下拉文本框

A：

可以使用Vue的组件库中提供的Select组件来生成下拉文本框，代码如下：

<template>
  <div>
    <select v-model="selected">
      <option v-for="(option, index) in options" :key="index" :value="option">
        {{ option }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: ['选项1', '选项2', '选项3']
    }
  }
}
</script>

以上代码中，我们使用了Vue的模板语法和v-model指令来绑定下拉文本框的选中值，v-for指令来生成下拉选项。选项数据可以从组件的props中传递进来，这里我们直接在组件内部定义了一个options数组。

利用Vue写一个文本框校验规则为大于0，小于100个字符

要利用Vue写一个文本框的校验规则，使其能够判断输入的文本是否大于0且小于100个字符，可以使用Vue提供的表单验证功能。

首先，需要在Vue实例中定义一个data属性来存储文本框输入的值，例如：

data() {
  return {
    inputText: ''
  }
}

然后，在模板中创建一个文本框，并绑定这个data属性，例如：

<input type="text" v-model="inputText">

接下来，在这个文本框的上级元素中添加一个验证规则，使用Vue提供的v-validate指令，例如：

<div v-validate="'required|between:1,100'">
  <input type="text" v-model="inputText">
  <span v-show="errors.has('inputText')">{{ errors.first('inputText') }}</span>
</div>

这里的v-validate指令传入了两个参数，一个是required表示文本框不能为空，另一个是between:1,100表示文本框输入的字符数必须在1到100之间。在span标签中使用了Vue提供的errors对象来显示验证错误信息。

最后，在Vue实例中定义一个submit方法，用来处理表单提交事件，并在该方法中调用表单验证方法，例如：

methods: {
  submit() {
    this.$validator.validateAll().then(result => {
      if (result) {
        // 表单验证通过，可以提交表单
      } else {
        // 表单验证不通过，提示错误信息
      }
    })
  }
}

这里使用了Vue提供的$validator对象来进行表单验证，validateAll()方法会返回一个Promise对象，验证通过时返回true，否则返回false。