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