Vue.js中v-model指令的用法介紹
一、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實(shí)例 new Vue({ el:"#my", data:{ inputValue:"hello world", chkState:true, //默認(rèn)為true chkArray:["1"], //處理成組的復(fù)選框需要定義一個數(shù)組,對應(yīng)每個CheckBox的value值,這里默認(rèn)第二個選中 chkLists:[{displayName:"科普讀物",value:"0"}, {displayName:"中小學(xué)教材",value:"1"}, {displayName:"計(jì)算機(jī)科學(xué)",value:"2"}], rdoCheck:"1", // 動態(tài)處理radio radioLists:[{name:"Gender",value:"1",displayName:"男"}, {name:"Gender",value:"2",displayName:"女"}], sectionValue:"香蕉", // 沒有value值,默認(rèn)值就是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"> <!--表單輸入框 當(dāng)inputValue的值為123的時候禁止輸入--> <input type="text" v-model="inputValue" :disabled="inputValue==123">{{inputValue}} <!--復(fù)選框 v-model 當(dāng)前的狀態(tài):true或者false--> <div> <input type="checkbox" v-model="chkState">當(dāng)前選中狀態(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>當(dāng)前選中的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指令實(shí)例
下面代碼利用v-model指令實(shí)現(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é)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
2分鐘實(shí)現(xiàn)一個Vue實(shí)時直播系統(tǒng)的示例代碼
這篇文章主要介紹了2分鐘實(shí)現(xiàn)一個Vue實(shí)時直播系統(tǒng)的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06利用webstrom調(diào)試Vue.js單頁面程序的方法教程
這篇文章主要給大家介紹了利用webstrom調(diào)試Vue.js單頁面程序的方法教程,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06vue-router解決相同路徑跳轉(zhuǎn)報錯的問題
這篇文章主要介紹了vue-router解決相同路徑跳轉(zhuǎn)報錯的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04Vue開發(fā)項(xiàng)目中如何使用Font Awesome 5
Font Awesome是一套流行的圖標(biāo)字體庫,我們在實(shí)際開發(fā)的過程中會經(jīng)常遇到需要使用圖標(biāo)的場景,對于一些常用的圖標(biāo),我們可以直接在Font Awesome中找到并且使用,這篇文章主要給大家介紹了關(guān)于Vue開發(fā)項(xiàng)目中如何使用Font Awesome5的相關(guān)資料,需要的朋友可以參考下2021-11-11vue引用外部JS并調(diào)用JS文件中的方法實(shí)例
我們在做vue項(xiàng)目時,經(jīng)常會需要引入js,下面這篇文章主要給大家介紹了關(guān)于vue引用外部JS并調(diào)用JS文件中的方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02使用echarts柱狀圖實(shí)現(xiàn)select下拉刷新數(shù)據(jù)
這篇文章主要介紹了使用echarts柱狀圖實(shí)現(xiàn)select下拉刷新數(shù)據(jù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10