vue中的指令v-model

時間 2019-11-30

標籤 vue 指令 model 简体版

原文原文鏈接

Vue的指令：其實就是單個JavaScript表達式，通常來講是帶有v-前綴；都有着對應的官網介紹：https://cn.vuejs.org/v2/guide/forms.htmljavascript

v-model：數據雙向綁定html

下面是一個關於數據綁定的小案例：vue

頁面初始時：java

在輸入框input中加入v-model後，當在輸入框中輸入內容，其對應綁定的數據也對應的發生改變，下圖輸入框綁定username爲例：web

v-model指令的代碼：數組

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
    </head>
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script>
        window.onload= () =>{new Vue({
            el:'#two',
            data:{
                
                username:"bob",
                num:"24",
                interest:['唱歌','跳舞','游泳'],
                user:{
                    name:'keli',
                    age:'13'
                }
            }
            
            
            
        })
        }
    </script>
    <body>
        <div id="two">
            用戶信息：<input  type="text" v-model="username"/><br />
            暱稱：
            {{username}}<br />
            編號：
            {{num}}<br />
            興趣：{{interest}}<br />
            我的信息：
              姓名：{{user.name}}
             年齡：{{user.age}}
              
            
        </div>
    </body>
</html>

v-model在其餘控件上的使用瀏覽器

input中的checkbox類型，初始時將其設置爲false，當使用v-model進行綁定後，勾選後，變爲true，其效果以下：ide

實現該效果的核心代碼：ui

vue部分spa

<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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。