Vue.js从入门到跑路-表单输入数据处理

我们在Vue中绑定表单输入数据主要有两种方法：事件监听和v-model

事件监听

<h1>{{ msg }}</h1>
<input type="text" @input="handleInput" id="msg" />

const app = Vue.createApp({
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    handleInput(event) {
      this.msg = event.target.value;
    },
  },
});
app.mount("#app");

在这个示例中，我们定义了一个handleInput方法，@input即监听输入事件，vue能访问JS原生的事件对象指向值即用event.target.value,要想在页面中使用需要保存到data中。

v-model

改写上面的示例代码

<h1>{{ msg }}</h1>
<input type="text" v-model="msg" id="msg" />
<button @click="reset">重置</button>

const app = Vue.createApp({
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    reset() {
      this.msg = "";
    },
  },
});
app.mount("#app");

我们添加一个重置方法，当我们点击按钮的时候，我们会发现div和输入框里的值都被清空了，实现了数据的双向绑定（即输入框的数据和data中的msg绑定，两者只要有一个更新，另一个也会更新）

绑定单选框

<div id="app">
  <input type="radio" v-model="picked" value="html" />
  <label>html</label>
  <input type="radio" v-model="picked" value="css" />
  <label>css</label>
  <input type="radio" v-model="picked" value="javascript" />
  <label>javascript</label>
  <p>你选择的是：{{picked}}</p>
</div>
<script>
  //创建vue示例
  const app = Vue.createApp({
    data() {
      return {
        picked: "",
      };
    },
  }).mount("#app");
</script>

要注意的是v-model 绑定的是value的值

绑定多选框

<div id="app">
  <input type="checkbox" v-model="picked" value="html" />
  <label>html</label>
  <input type="checkbox" v-model="picked" value="css" />
  <label>css</label>
  <input type="checkbox" v-model="picked" value="javascript" />
  <label>javascript</label>
  <p>你选择的是：{{picked}}</p>
</div>
<script>
  const app = Vue.createApp({
    data() {
      return {
        picked: [],
      };
    },
  }).mount("#app");
</script>

未配置value v-model绑定的是checked 配置value v-model初始值为非数组 v-model绑定的是checked 配置value v-model初始值为数组 v-model绑定的是value

在vue中还有一种方法，设置元素的true-value 和 false-value 属性，在选中时v-model绑定的数据会被设为true-value的值，取消选择则为false-value

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />

绑定下拉列表

<div id="app">
  <select v-model="selected">
    <option v-for="item in option" :value="item.value">{{item.text}}</option>
  </select>
  <p>你选择的是：{{selected}}</p>
</div>
<script>
  const app = Vue.createApp({
    data() {
      return {
        selected: "",
        option: [
          { value: "html", text: "html" },
          { value: "css", text: "css" },
          { value: "javascript", text: "javascript" },
        ],
      };
    },
  }).mount("#app");
</script>

这里选项用了v-for进行动态渲染，如果选项可多选，selected需为一个数组

v-model的修饰符

<div id="app">
  <!-- v-model.lazy 失去焦点时才更新数据 -->
  <input type="text" v-model.lazy="text1" />
  <!-- v-model .number 转换为数字类型 -->
  <input type="text" v-model.number="text2" />
  <!-- v-model .trim 去除首尾空格 -->
  <input type="text" v-model.trim="text3" />
  <p>你输入的是：{{text1}}</p>
  <p>你输入的是：{{text2}}</p>
  <p>你输入的是：{{text3}}</p>
</div>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text1: "",
        text2: "",
        text3: "",
      };
    },
  }).mount("#app");
</script>