v-model实现数据双向绑定的本质

v-model用于表单、 及 数据的双向绑定,其本质上有两个作用:
1.v-bind(:)绑定一个value属性,将监听事件的数据放入input中 :value
2.v-on(@)给当前元素绑定input事件,对input事件的监听 @input
简单案例:

   <input type="text" v-model="test">{{test}}
        <br>
        
         <select v-model="selected">
            <option value="A被选">Aoption>
            <option value="B被选">Boption>
            <option value="C被选">Coption>
        select>
        <span>Selected: {{ selected }}span>
        <br>
       
        <input type="radio" id="small" value="small" v-model="picked">
        <label for="small">smalllabel>
        <br>
        <input type="radio" id="big" value="big" v-model="picked">
        <label for="big">biglabel>
        <br>
        <span>Picked: {{ picked }}span>
    div>
  new Vue({
            el: '#app',
            data: {
                test:'',
                selected: '',
                picked: ''

            }
        });

你可能感兴趣的:(vue-指令)