v-model directive

　　It's defined in the Vue.js documentation: A v-model default on a component will utilize props named props value and events named input events, but input controls of types like radio buttons, checkboxes, etc. may use value properties for different Purpose. model Options can be used to avoid such conflicts:

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

A simple two-way data binding

html：

<div id="app">
    <p>Original text message: {{message}}</p>
    <h3>Text Box</h3>
    <p>v-model:<input type="text" v-model="message"></p>
</div>

js：

var app = new Vue ({
  el: '#app' ,
  data:{
       message: 'hello View!'
  }
 })

At the same time there are some modifiers for v-model:

.lazy: Instead of import listening for change events.
.number: Convert the input string to a number.
.trim: Input without leading and trailing spaces.

Add data binding to the text box

<textarea  cols="30" rows="10" v-model="message"></textarea>

Bind a value to a checkbox

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

Multiple selection binding an array

<input type="checkbox" id="checkbox1" value="xiaofan" v-model="web_name">
<label for="checkbox1"> xiaofan </label>
<input type="checkbox" id="checkbox2" value="xiaoqiao" v-model="web_name">
<label for="checkbox2"> xiaoqiao </label>
<input type="checkbox" id="checkbox3" value="blue" v-model="web_name">
<label for="checkbox3"> blue </label> <br>

radio button binding value

<input type="radio" id="male" value="男" v-model="sex">
<label for="male"> 男 </label>
<input type="radio" id="female" value="女" v-model="sex">
<label for="female"> 女 </label>
<p>
    Your gender is: {{sex}}
</p>

Full code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-model instance</h1>
    <hr>

    <div id="app">
       <p> Original text message: {{message}} </p>
       <h3>Text Box</h3>
       <p> v-model: <input type="text" v-model="message"> </p>
       <p> v-model.lazy: <input type="text" v-model.lazy="message"> </p>
       <p> v-model.num: <input type="text" v-model.num="message"> </p>
       <p> v-model.trim: <input type="text" v-model.trim="message"> </p>
       <hr>
        <h3>Text Field</h3>
        <textarea  cols="30" rows="10" v-model="message"></textarea>  
        <hr>
        <h3>Multi-select box binds a value</h3>
        <input type="checkbox" id="istrue" v-model="istrue" >
        <label for="istrue"> {{istrue}} </label>
        <hr>
        <h3>Multiple selection boxes bind multiple values</h3>
        <input type="checkbox" id="checkbox1" value="xiaofan" v-model="web_name">
        <label for="checkbox1"> xiaofan </label>
        <input type="checkbox" id="checkbox2" value="xiaoqiao" v-model="web_name">
        <label for="checkbox2"> xiaoqiao </label>
        <input type="checkbox" id="checkbox3" value="blue" v-model="web_name">
        <label for="checkbox3"> blue </label> <br>
        <p>
            {{web_name}}
        </p>
        <hr>
        <h3>Radio button binding value</h3>
        <input type="radio" id="male" value="男" v-model="sex">
        <label for="male"> 男 </label>
        <input type="radio" id="female" value="女" v-model="sex">
        <label for="female"> 女 </label>
        <p>
            Your gender is: {{sex}}
        </p>

    </div>

    <script type="text/javascript">
        var app = new Vue ({
            el: "#app",
            data:{
                message:"Hello World!",
                istrue:true,
                web_name:[],
                sex:"",
            }
        })
    </script>
</body>
</html>

The long learning of Vue2.0 ing-6

v-model directive

A simple two-way data binding

Guess you like