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>

效果如下：