vue---v-model的詳細解答

時間 2019-11-07

標籤 vue model 詳細解答简体版

原文原文鏈接

一、v-model：雙向數據綁定的實現原理等同於一個 v-bind 加 v-on

<div id="app">
    <!-- <input type="text" v-model="message"> -->
    <input type="text" :value="message" @input="message=$event.target.value">
    <h2>{{message}}</h2>
</div>

二、v-model 結合radio類型的使用

    <label for="man">
        <input type="radio" id="man" value="男" v-model="sex">
    </label>
    <label for="Wman">
        <input type="radio" id="Wman" value="女" v-model="sex">
    </label>
    <h2>你選擇的性別是：{{sex}}</h2>

三、v-model結合checkbox的使用

一、單選框

    <!-- checkbox 單選框 -->
    <label for="agree">
        <input type="checkbox" id="agree" v-model="ischange">贊成協議 </label>
    <h2>你選擇的是:{{ischange}}</h2>
    <button :disabled="!ischange">下一步</button><br><br><br>

二、多選框

    <!-- checkbox 多選框 -->
    <input type="checkbox" value="籃球" v-model="hobbies">籃球 <input type="checkbox" value="足球" v-model="hobbies">足球 <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球 <input type="checkbox" value="兵乓球" v-model="hobbies">兵乓球 <input type="checkbox" value="排球" v-model="hobbies">排球 <h2>你的愛好是：{{hobbies}}</h2>

四、v-model結合select的使用

一、單選框

    <!-- select  單選 -->
    <select name="" id="" v-model="fruit">
        <option value="西瓜">西瓜</option>
        <option value="蘋果">蘋果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
    </select>
    <h2>你選擇的水果是：{{fruit}}</h2><br><br>

二、多選框

    <!-- select 多選 -->
    <select name="" id="" v-model="fruits" multiple>
        <option value="西瓜">西瓜</option>
        <option value="蘋果">蘋果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
    </select>
    <h2>你選擇的水果是:{{fruits}}</h2>

五、值綁定：動態綁定Value的值

    <!-- 值綁定 -->
    <label :for="item" v-for="item in fruitHobbies">
        <input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}} </label>

六、v-model修飾符的使用

一、lazy 做用：當文本框失去焦點或按 enter 的時候，v-model 纔會執行變量的更新

    <!-- 一、lazy修飾符 -->
    <label for="active">
        <input type="text" id="active" v-model.lazy="message">
    </label>
    <h2>{{message}}</h2>

二、number 做用：把數據類型轉換乘Number類型

    <!-- 二、number修飾符 -->
    <!-- 當type的類型爲number類型的時候，v-model綁定的值自動變成String類型 -->
    <input type="number" v-model.number="age">
    <h2>{{age}}---{{typeof(age)}}</h2>

三、、trim 做用：消除字符串連邊的空格

    <!-- 三、trim 修飾符 -->
    <input type="text" v-model="trim">
    <h2>{{trim}}</h2>

***完整代碼*

<!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>Document</title>
    <script src="./js/vue.js"></script>
</head>
<div id="app">
    <!-- <input type="text" v-model="message"> -->
    <input type="text" :value="message" @input="message=$event.target.value">
    <h2>{{message}}</h2><br>

    <label for="man">
        <input type="radio" id="man" value="男" v-model="sex">
    </label>
    <label for="Wman">
        <input type="radio" id="Wman" value="女" v-model="sex">
    </label>
    <h2>你選擇的性別是：{{sex}}</h2><br>

    <!-- checkbox 單選框 -->
    <label for="agree">
        <input type="checkbox" id="agree" v-model="ischange">贊成協議 </label>
    <h2>你選擇的是:{{ischange}}</h2>
    <button :disabled="!ischange">下一步</button><br><br><br>

    <!-- checkbox 多選框 -->
    <input type="checkbox" value="籃球" v-model="hobbies">籃球 <input type="checkbox" value="足球" v-model="hobbies">足球 <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球 <input type="checkbox" value="兵乓球" v-model="hobbies">兵乓球 <input type="checkbox" value="排球" v-model="hobbies">排球 <h2>你的愛好是：{{hobbies}}</h2><br><br><br>

    <!-- select 單選 -->
    <select name="" id="" v-model="fruit">
        <option value="西瓜">西瓜</option>
        <option value="蘋果">蘋果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
    </select>
    <h2>你選擇的水果是：{{fruit}}</h2><br><br>
    <!-- select 多選 -->
    <select name="" id="" v-model="fruits" multiple>
        <option value="西瓜">西瓜</option>
        <option value="蘋果">蘋果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
    </select>
    <h2>你選擇的水果是:{{fruits}}</h2><br><br>

    <!-- 值綁定 -->
    <label :for="item" v-for="item in fruitHobbies">
        <input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}} </label><br><br>

    <!-- v-model 修飾符 的使用 -->
    <!-- 一、lazy修飾符 -->
    <label for="active">
        <input type="text" id="active" v-model.lazy="message">
    </label>
    <h2>{{message}}</h2><br>

    <!-- 二、number修飾符 -->
    <!-- 當type的類型爲number類型的時候，v-model綁定的值自動變成String類型 -->
    <input type="number" v-model.number="age">
    <h2>{{age}}---{{typeof(age)}}</h2><br>

    <!-- 三、trim 修飾符 -->
    <input type="text" v-model="trim">
    <h2>{{trim}}</h2>
</div>

<body>
    <script> let vm = new Vue({ el: '#app', data: () => ({ message: 'v-model實現原理', sex: '男', age:0, ischange: true, hobbies: [], fruit: '香蕉', fruits: [], fruitHobbies: ['西瓜', '草莓', '香蕉', '蘋果', '哈密瓜'], trim:' 去除字符串兩邊的空格,控制檯才能看出來 ' }), methods: {} }) </script>
</body>

</html>