Vue初学12-v-model

v-model指令用于组件和数据的绑定，是双向绑定，值绑定。

input绑定

v-model绑定后input中value值的变化后会传递给绑定的数据（data中的数据），数据的变化也会改变input的value。如下

    <div id="app">
          <input id="test" v-model="inputvalue"/>
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                inputvalue:"哈哈哈",
            }
        });
    </script>

v-model相当于进行了两步操作，第一步，将input中value的值动态设置为{{inputvalue}} ，第二步监听value的变化，value变化时，将value的值赋给inputvalue。如下

    <div id="app">
         <input id="test" :value="inputvalue" @input="valueChanged"/>
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                inputvalue:"哈哈哈",
            },
            methods:{
                valueChanged(e){
                   this.inputvalue = e.target.value;
                }
            }
        });
    </script>

 radio绑定

radio一般为单位，而且选项之间是互斥的，如果两个选项同时绑定了同一数据，能够自动实现互斥。如下

    <div id="app">
           <label for="man">
               <input type="radio" id="man" value="男" v-model="sex" />男
           </label>
           <label for="woman">
               <input type="radio" id="woman" value="女" v-model="sex" />女
           </label>
           <p>性别：{{sex}}</p>
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                sex:"男"
            }
        });
    </script>

效果如下：

 checkbox绑定

checkbox可以是单选的也可以是多选的。

（1）单选

单选绑定的值一般是布尔型的，一般用于是否勾选的判断。

    <div id="app">
            <label for="know">
                <input type="checkbox" id="know" v-model="isread"/>已经阅读完毕
            </label>
           <p>是否已经阅读：{{isread}}</p>
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                isread:false
            }
        });
    </script>

效果如下：

（2）多选

    <div id="app">
            <label for="apple">
                <input type="checkbox" id="apple" value="苹果" v-model="fruits"/>苹果
            </label>
             <label for="banana">
                <input type="checkbox" id="banana" value="香蕉" v-model="fruits"/>香蕉
            </label>
             <label for="orange">
                <input type="checkbox" id="orange" value="桔子" v-model="fruits"/>桔子
            </label>
        <p>选择的水果：{{fruits.toString()}}</p>
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                fruits:[]
            }
        });
    </script>

效果如下：

select绑定

select也是支持单选和多选的。

（1）单选

    <div id="app">
        <!--单选-->
        <select id="sfruit" v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="桔子">桔子</option>
        </select>
        <p>选择的水果：{{fruit}}</p>
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                fruit:'香蕉'
            }
        });
    </script>

效果如下：

（2）多选

    <div id="app">
        <!--单选-->
        <select id="sfruit" v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="桔子">桔子</option>
        </select>
        <p>选择的水果：{{fruit}}</p>
        <!--多选-->
        <select id="sfruits" v-model="fruits" multiple>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="桔子">桔子</option>
        </select>
        <p>选择的水果(多选)：{{fruits.toString()}}</p>
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                fruit:'香蕉',
                fruits:[]
            }
        });
    </script>

效果如下：