Vue3+.net6.0 七 v-model 表单输入绑定

表单输入绑定

v-model可以绑定各种不同类型的输入，它会根据不同的元素自动使用对应的DOM属性和事件组合。

文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；

<input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；

<select> 会绑定 value property 并侦听 change 事件。

 

文本框和文本域

跟vue2一样，输入框绑定了属性message，监听到值发生了变化，在调用处更新显示的内容。

 

<div id="appDiv" class="text-center">
    <p>Message is: {{ message }}</p>
    <input v-model="message" placeholder="edit me" />
</div>

<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
<script type="module">
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                message:''
            }
        }
    });
    app.mount('#appDiv');
</script>

 

文本框和文本域的绑定方式是一样的。

 

复选框

1.绑定单个复选框

    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>

 data() {
            return {
                checked:false
            }
        }

2.绑定一组复选框

有的时候我们不仅仅需要知道复选框是否选中，还想知道复选框对应的选项的内容，这个时候就不能绑定checked了，这里用一组复选框绑定作为示例。

    <div>Checked names: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
</div>

data部分加上

 checkedNames: []

这样在选择或取消后，可以看到chekedNames这个数组中存放的不是true/false，而是对应的value值，将单个复选框的示例中的v-model绑定到checkedNames并加上value的话，也是同样的效果。

 

单选框

<div>Picked: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

data部分加上

 picked:''

效果和上面示例改造过的单个复选框一样，变量picked会记录value的值。

 

下拉框

   <div>Selected: {{ selected }}</div> 
　　<select v-model="selected">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
    </select>

data部分

 selected:''