如何理解Vue的v-model指令的使用方法

2019-11-19 13:26:57

字体：大中小

来源：转载

供稿：网友

本文主要讲解v-model指令，主要包括HTML元素的v-model和组件上的v-model两种，用四个简单的案例介绍v-model的使用。

案例一：HTML元素的v-model -输入框(text)

<!DOCTYPE html>  <html lang="en">  <head>    <meta charset="UTF-8">    <title>v-model指令</title>    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>  </head>  <body>    <div id="app4">      {{price}}<br>      <input v-model="price"><!-- 下行注释的语法糖 -->      <!-- <input :value="price" @input="price = $event.target.value"> -->    </div>    <script>      new Vue({        el: '#app4',        data: {          price: '20'        }      });    </script>  </body></html>

案例二：定制组件的v-model - 输入框(text)

<!DOCTYPE html>  <html lang="en">  <head>    <meta charset="UTF-8">    <title>v-model指令</title>    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>  </head>  <body>    <div id="app3">      {{price}}      <my-input v-model="price"></my-input><!-- 下行注释的语法糖 -->      <!-- <my-input :value="price" @input="val => {price = val}"></my-input> -->    </div>    <script>      Vue.component('my-input', {        template: '<div></span><input type="text" ref="input" :value="value" @input="doThis"/></div>',        props: {          value: String        },        methods: {          doThis() {            this.$emit('input', this.$refs.input.value);          }        }      });      new Vue({        el: '#app3',        data: {          price: '10'        }      });    </script>  </body></html>

案例三：定制组件的v-model - 复选框(checkbox) - 2.2.0 新增

 <!DOCTYPE html>    <html lang="en">    <head>      <meta charset="UTF-8">      <title>v-model指令</title>      <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>    </head>    <body>      <div id="app2">        {{fruit}}<!-- 观测数据变化 -->        <my-checkbox v-model="fruit.apple" value="apple"></my-checkbox><!-- 下行注释的语法糖 -->        <!-- <my-checkbox :checked="fruit.apple" @change="val => {fruit.apple = val}" value="apple"></my-checkbox> -->              <my-checkbox v-model="fruit.peach" value="peach"></my-checkbox><!-- 下行注释的语法糖 -->        <!-- <my-checkbox :checked="fruit.peach" @change="val => {fruit.peach = val}" value="peach"></my-checkbox> -->      </div>      <script>        Vue.component('my-checkbox', {          template: '<div><span>{{value}}</span><input type="checkbox" :checked="checked" @change="doThis" :value="value"/></div>',          model: {            prop: 'checked',            event: 'change'          },          props: {            checked: Boolean,            value: String          },          methods: {            doThis() {              this.$emit('change', !this.checked);            }          }        });        new Vue({          el: '#app2',          data: {            fruit: {//数据              apple: true,              peach: false            }          }        });      </script>    </body>  </html>

案例四：定制组件的v-model - 单选按钮(radio) -2.2.0 新增

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>v-model指令</title>  <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script></head><body>  <div id="app">    {{fruit}}<!-- 观测数据变化 -->    <my-radio v-model="fruit" value="apple" name="myFruit"></my-radio><!-- 下行注释的语法糖 -->    <!-- <my-radio :checked="fruit" @change="val => {fruit = val}" value="apple"></my-radio> -->        <my-radio v-model="fruit" value="peach" name="myFruit"></my-radio><!-- 下行注释的语法糖 -->    <!-- <my-radio :checked="fruit" @change="val => {fruit = val}" value="peach"></my-radio> -->  </div>  <script>    Vue.component('my-radio', {      template: '<div><span>{{value}}</span><input :name="name" type="radio" ref="radio" :checked="checked===value" @change="doThis" :value="value"/></div>',      model: {        prop: 'checked',        event: 'change'      },      props: {        checked: String,        value: String,        name: String      },      methods: {        doThis() {          this.$emit('change', this.$refs.radio.value);        }      }    });    new Vue({      el: '#app',      data: {        fruit: 'peach'//数据      }    });  </script></body></html>