v-model的使用

表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单。Vue中使用v-model指令来实现元素和数据的双向绑定。

基本使用

<input type="text" v-model="message" />
<div>{{ message }}</div>

data() {
    return {
      message: "一条信息",
    };
},

当input中输入发生改变时，message的值也会发生对应的改变；当修改了message的值时，input中的显示也会发生改变。

不使用v-model实现双向绑定

<input type="text" :value="message" @input="valueChange"/>
//<input type="text" :value="message" @input="message = $event.target.value"/>

data() {
    return {
      message: "一条信息",
    };
},
methods: {
    valueChange(event) {
        this.message = event.target.value;
    }
}

v-model结合radio

<label for="male">
  <input type="radio" id="male" value="男" v-model="sex" />男
</label>
<label for="female">
  <input type="radio" id="female" value="女" v-model="sex" />女
</label>
<h2>你选择的性别是：{{ sex }}</h2>

data() {
    return {
      sex: '',
    };
},

v-model结合checkbox

<input type="checkbox" value="jquery" v-model="web" />jquery
<input type="checkbox" value="vue" v-model="web" />vue
<input type="checkbox" value="react" v-model="web" />react
<input type="checkbox" value="nodejs" v-model="web" />nodejs
<h2>您选择的是：{{ web }}</h2>

data() {
    return {
      web: [],
    };
},

v-model结合select

<select name="web" v-model="web">
  <option value="jquery">jquery</option>
  <option value="vue">vue</option>
  <option value="react">react</option>
  <option value="nodejs">nodejs</option>
</select>