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>