v-model只能接变量吗

在Vue中，v-model指令可以绑定到任何能够触发input事件的元素上，不仅仅是表单元素，例如`<div>`或`<span>`等。而v-model指令绑定的值可以是一个表达式，也可以是一个对象的属性。因此，v-model不仅可以接受变量，还可以接受对象的属性。例如：

<template>
  <div>
    <input v-model="message">
    <span>{{ message }}</span>
    <br>
    <input v-model="user.name">
    <span>{{ user.name }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      user: {
        name: ''
      }
    }
  }
}
</script>

在上面的例子中，`v-model="message"`绑定了一个变量`message`，而`v-model="user.name"`则绑定了一个对象`user`的属性`name`。

相关问题

内置指令v-model实训——下拉列表框绑定、

好的，下面我来介绍一下如何使用 v-model 指令来实现下拉列表框的绑定。

首先，我们需要在 HTML 中创建一个下拉列表框，并使用 v-model 指令将其绑定到一个变量上。例如，下面的代码创建了一个下拉列表框，其中选项为 "Red"、"Green" 和 "Blue"，并将其绑定到变量 selectedColor 上：

<select v-model="selectedColor">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

接下来，我们可以在 Vue 实例中定义一个 selectedColor 变量，用于存储用户选择的颜色。例如：

new Vue({
  el: '#app',
  data: {
    selectedColor: ''
  }
})

现在，当用户选择下拉列表框中的一个选项时，Vue 会自动将选项的值赋值给 selectedColor 变量。我们可以在 Vue 实例中使用这个变量来执行其他逻辑，例如在模板中显示用户选择的颜色：

<div>Selected color: {{ selectedColor }}</div>

这样，当用户选择一个颜色时，页面上会显示 "Selected color: [color]"，其中 [color] 是用户选择的颜色。

以上就是使用 v-model 指令来实现下拉列表框的绑定的方法。需要注意的是，v-model 指令只能用于表单元素，例如 input、textarea 和 select，而且要求这些元素必须有 value 属性。

el-input只能输入整数0-100

el-input是Element UI库中的一个输入框组件，用于接收用户的输入。如果你想限制el-input只能输入整数0-100，可以通过以下几种方式实现：

1. 使用type属性：设置el-input的type属性为"number"，这样输入框将只接受数字类型的输入。然后，你可以通过添加min和max属性来限制输入的范围为0-100。

<el-input type="number" :min="0" :max="100"></el-input>

2. 使用自定义验证规则：通过设置el-input的自定义验证规则，可以在用户输入时进行验证。你可以使用正则表达式来限制输入的范围为0-100。

<el-input v-model="inputValue" :rules="[{ pattern: /^(?:0|[1-9][0-9]?|100)$/ }]" ></el-input>

在上述代码中，v-model绑定了一个名为inputValue的变量，用于存储用户输入的值。rules属性接受一个数组，其中包含了一个正则表达式规则，该规则限制了输入的范围为0-100。

3. 使用自定义指令：你还可以通过自定义指令来实现对el-input的限制。自定义指令可以在用户输入时拦截并处理输入的内容。

Vue.directive('limitInput', {
  bind: function(el) {
    el.addEventListener('input', function(e) {
      var value = e.target.value;
      if (value !== '') {
        value = parseInt(value);
        if (isNaN(value) || value < 0 || value > 100) {
          e.target.value = '';
        }
      }
    });
  }
});

在上述代码中，我们定义了一个名为limitInput的自定义指令，通过addEventListener监听input事件，在用户输入时进行处理。如果输入的值不符合要求（不是整数或超出范围），则将输入框的值设为空。

然后，在el-input上应用这个自定义指令：

<el-input v-limit-input></el-input>

这样，el-input就只能输入整数0-100了。