Vue.js中v-model指令的用法介紹

更新時間：2022年03月14日 09:54:54 作者：.NET開發(fā)菜鳥

這篇文章介紹了Vue.js中v-model指令的用法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、v-model指令

v-model 用來獲取表單元素的值。對應(yīng)input輸入框獲取的是輸入的值，單選按鈕、復(fù)選框、下拉框獲取的是選擇的狀態(tài)。

使用v-model可以在表單控件或者組件上創(chuàng)建雙向綁定。

代碼示例如下：

<!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>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 構(gòu)建vue實例
           new Vue({
               el:"#my",
               data:{
                 inputValue:"hello world",
                 chkState:true, //默認為true
                 chkArray:["1"], //處理成組的復(fù)選框需要定義一個數(shù)組，對應(yīng)每個CheckBox的value值,這里默認第二個選中
                 chkLists:[{displayName:"科普讀物",value:"0"},
                           {displayName:"中小學(xué)教材",value:"1"},
                           {displayName:"計算機科學(xué)",value:"2"}],
                 rdoCheck:"1",
                 // 動態(tài)處理radio
                 radioLists:[{name:"Gender",value:"1",displayName:"男"},
                             {name:"Gender",value:"2",displayName:"女"}],
                 sectionValue:"香蕉", // 沒有value值，默認值就是name的值
                 sectionValue1:"0",
                 optionLists:[{value:"0",displayName:"蘋果"},
                             {value:"1",displayName:"香蕉"},
                             {value:"2",displayName:"葡萄"}]
               },
               // 方法
               methods:{

               },
               filters:{
                   toShowCheckBoxState:function(value){
                       return value==true?"選中":"未選中"
                   }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
       <!--表單輸入框 當inputValue的值為123的時候禁止輸入-->
       <input type="text" v-model="inputValue" :disabled="inputValue==123">{{inputValue}}
       <!--復(fù)選框  v-model 當前的狀態(tài):true或者false-->
       <div>
           <input type="checkbox" v-model="chkState">當前選中狀態(tài):{{chkState | toShowCheckBoxState}}
       </div>
        <!--多個復(fù)選框 組  靜態(tài)顯示-->
        <div>
            <input type="checkbox" v-model="chkArray" value="0">唱歌
            <input type="checkbox" v-model="chkArray" value="1">跳舞
            <input type="checkbox" v-model="chkArray" value="2">打籃球
            <p>當前選中的value值:{{chkArray}}</p>
        </div>
        <!--復(fù)選框 動態(tài)顯示-->
        <div>
            <ul>
                <li v-for="list in chkLists">
                    <input type="checkbox" v-model="chkArray" :value="list.value">{{list.displayName}}
                </li>
            </ul>
        </div>
        <!--單選框 靜態(tài)顯示 -->
        <div>
            <input type="radio" v-model="rdoCheck" name="Gender" value="1">男
            <input type="radio" v-model="rdoCheck" name="Gender" value="2">女
            <p>{{rdoCheck}}</p>
        </div>
         <!--單選框 動態(tài)顯示-->
         <div>
             <ul>
                 <li v-for="list in radioLists">
                    <input type="radio" v-model="rdoCheck" :name="list.name" :value="list.value">{{list.displayName}}
                 </li>
             </ul>
            <p>{{rdoCheck}}</p>
        </div>
        <!--下拉框 靜態(tài)顯示 -->
        <div>
            <select v-model="sectionValue">
                <option>蘋果</option>
                <option>香蕉</option>
                <option>葡萄</option>
            </select>
            <p>{{sectionValue}}</p>
        </div>

        <!--下拉框 靜態(tài)顯示 -->
        <div>
            <select v-model="sectionValue1">
                <option value="0">蘋果</option>
                <option value="1">香蕉</option>
                <option value="2">葡萄</option>
            </select>
            <p>{{sectionValue1}}</p>
        </div>

        <!--下拉框 靜態(tài)顯示 -->
        <div>
            <select v-model="sectionValue1">
                <option v-for="list in optionLists" :value="list.value">{{list.displayName}}</option>
            </select>
            <p>{{sectionValue1}}</p>
        </div>
    </div>
</body>
</html>

二、v-model指令實例

下面代碼利用v-model指令實現(xiàn)全選的功能：

<!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>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
        window.onload = function(){
    var vm =new Vue({
        el:'#my',
        data:{
            checkAll: {name:'全選',check:false},
            lists:[{name:'小米',check:true},
                    {name:'華為',check:false},
                    {name:'蘋果',check:false},
                    {name:'中興',check:false},
                    {name:'OPPO',check:false}]
        },
        methods: {
            checkAllChange:function(){
                vm.lists.forEach(function(item){
                    item.check = vm.checkAll.check;
                });
            },
            curChange:function(){
                //true的狀態(tài)
                var curTure = this.lists.filter(function(item){
                    return item.check ==true;
                });
                curTure.length == this.lists.length ? this.checkAll.check = true : this.checkAll.check = false ;
            }
        }
    })
}
    </script>
</head>
<body>
    <div id='my'>
        <input type="checkbox" v-model="checkAll.check" @change="checkAllChange()">
        <label>{{checkAll.name}} {{checkAll.check}}</label>
        <ul>
            <li v-for="list in lists">
                <input type="checkbox" v-model="list.check"  @change="curChange()">
                <label>{{list.name}} {{list.check}}</label>
            </li>
                    
        </ul>
    </div>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: