vue中的指令v-model
阿新 • • 發佈：2019-04-13
pan inter 列表 utf-8 下拉列表 ide 介紹 .com web 
Vue的指令：其實就是單個JavaScript表達式，一般來說是帶有v-前綴；都有著對應的官網介紹：https://cn.vuejs.org/v2/guide/forms.html
v-model：數據雙向綁定
下面是一個關於數據綁定的小案例：
頁面初始時：
在輸入框input中加入v-model後，當在輸入框中輸入內容，其對應綁定的數據也對應的發生改變，下圖輸入框綁定username為例：
v-model指令的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="
v-model在其他控件上的使用
input中的checkbox類型，初始時將其設置為false，當使用v-model進行綁定後，勾選後，變為true，其效果如下：
實現該效果的核心代碼：
vue部分
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{new Vue({
el:‘#two‘,
data:{
checked:false
}
})
}
</script>
HTML：
<div id="two">
<div id="checkbox">
<input type="checkbox" v-model="checked" />{{checked}}
</div>
</div>
當定義一個空的數組在vue中時：
<script> window.onload= () =>{new Vue({ el:‘#two‘, data:{ checked:false, utils:[] } }) } </script>
其初始效果：
勾選不同的瀏覽器的時候，其瀏覽器的名稱會顯示在空的數組中：
html的代碼：
<div id="two">
<div id="checkbox">
<input type="checkbox" v-model="checked" />{{checked}}
</div>
<div id="multi-checkbox" >
<input type="checkbox" value="baidu" v-model="utils" />baidu
<input type="checkbox" value="IE" v-model="utils" />IE
<input type="checkbox" value="Lynx" v-model="utils" />Lynx
<br />
選中的瀏覽器：{{utils}}
</div>
</div>
v-model應用在下拉列表控件
初始效果：
數據的綁定後：
vue:
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{new Vue({
el:‘#two‘,
data:{
selected:""
}
})
}
</script>
html:
<div id="two">
<div id="select">
<select v-model="selected">
<option disabled="disabled" value="">--請選擇--</option>
<option> java</option>
<option> html</option>
<option> java web</option>
<option>javascript</option>
</select>
已選擇:{{selected}}
</div>
</div>
v-model應用在文本控件：
vue：
<script> window.onload= () =>{new Vue({ el:‘#two‘, data:{ msg:"" } }) } </script>
HTML：
<div id="two">
<div id="textarea">
<textarea v-model="msg" placeholder=" 請輸入描述內容.......">
</textarea>
<p>{{msg}}</p>
</div>
</div>
v-model在以上控件上的使用的所有代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-model</title> 6 </head> 7 <script type="text/javascript" src="../js/vue.js" ></script> 8 <script> 9 window.onload= () =>{new Vue({ 10 el:‘#two‘, 11 data:{ 12 // checked:false, 13 // utils:[], 14 // selected:"", 15 msg:"" 16 17 18 19 } 20 21 22 23 }) 24 } 25 </script> 26 <body> 27 <div id="two"> 28 <!--<div id="checkbox"> 29 <input type="checkbox" v-model="checked" />{{checked}} 30 31 </div> 32 <div id="multi-checkbox" > 33 <input type="checkbox" value="baidu" v-model="utils" />baidu 34 <input type="checkbox" value="IE" v-model="utils" />IE 35 <input type="checkbox" value="Lynx" v-model="utils" />Lynx 36 <br /> 37 選中的瀏覽器：{{utils}} 38 39 </div>--> 40 41 <!--<div id="select"> 42 <select v-model="selected"> 43 44 <option disabled="disabled" value="">--請選擇--</option> 45 <option> java</option> 46 <option> html</option> 47 <option> java web</option> 48 <option>javascript</option> 49 </select> 50 51 已選擇:{{selected}} 52 </div> 53 --> 54 55 <div id="textarea"> 56 57 <textarea v-model="msg" placeholder=" 請輸入描述內容......."> 58 59 </textarea> 60 61 <p>{{msg}}</p> 62 </div> 63 64 65 </div> 66 67 68 </body> 69 </html>v-model在不同控件上的使用.html
vue中的指令v-model