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="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:"",

                interest:['唱歌','跳舞','游泳'],

                user:{

                    name:'keli',

                    age:''

                }

            }

        })

        }

    </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，其效果如下：

实现该效果的核心代码：

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在以上控件上的使用的所有代码：

 <!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:{

 //                checked:false,

 //                utils:[],

 //                selected:"",

                 msg:""

             }

         })

         }

     </script>

     <body>

         <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 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 id="textarea">

                <textarea v-model="msg" placeholder="   请输入描述内容.......">

             </textarea>

                <p>{{msg}}</p>

            </div>

         </div>

     </body>

 </html>

v-model在不同控件上的使用.html

vue中的指令v-model的更多相关文章

  1. Vue中插槽指令

    08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...

  2. Vue基础系列（四）——Vue中的指令（上）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  3. Vue基础系列（五）——Vue中的指令（中）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  4. vue中自定义指令

    //vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...

  5. Vue中的指令（听博主说总结的很好）

    指令[重点] 作用:简化Dom操作 参考:https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4 特点: 1.都是以v-开头 2.除了插值表达式,其它都写在标签 ...

  6. vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  7. vue中自定义指令的使用

    原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...

  8. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  9. 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

随机推荐

  1. U盘复制文件到最后5秒会卡住怎么办解决

    现在的U盘容量已经非常大了,一般都有16G以上,为了能放单文件大于4G的数据大多数时候我们都是把U盘格式化为ntfs格式的,所以会出现不管是大文件还是小文件,当你往U盘里复制文件或者使用发送到U盘功能 ...

  2. js--script和link中的 integrity 属性

    <link crossorigin="anonymous" integrity="sha256-+hDz/gVbhp24mhOmoIT4Du4F3K5fs9fjjo ...

  3. 根据异常自定义处理逻辑（【附】java异常处理规范）

    ▄︻┻┳═一『异常捕获系列』Agenda: ▄︻┻┳═一有关于异常捕获点滴,plus我也揭揭java的短 ▄︻┻┳═一根据异常自定义处理逻辑([附]java异常处理规范) ▄︻┻┳═一利用自定义异常来 ...

  4. php 提取多维数组指定列

    前言:有时候在开发中会遇到这样的问题,我们需要把有规律的多维数组按照纵向(列)取出,有下面的方法可用: 我们将拿下面的数组来处理: 1 $arr = array( 2 '0' => array( ...

  5. 关于oracle中的数字类型

    1.关于number类型. 以下是从其文档中摘录出的一句话: p is the precision, or the total number of significant decimal digits ...

  6. <6>Lua元表和冒号 self

    Lua中没有像C.C++.JAVA中的类概念,面向对象等 ,但我们可以模拟出来 1. Lua中有个很重要的概念元表 设置元表setmetatable()函数  获取元表getmetatable()函数 ...

  7. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  8. UIView常见方法

    - (void)addSubview:(UIView *)view; 添加一个子控件view   - (void)removeFromSuperview; 从父控件中移除 - (UIView *)vi ...

  9. Linux 中常用的命令

    Linux中的常用命令: 终端快捷键: Ctrl + a/Home 切换到命令行开始 Ctrl + e/End 切换到命令行末尾 Ctrl + l 清除屏幕内容,效果等同于clear Ctrl + u ...

  10. python mmap对象

    ----使用内存映射的原因 为了随机访问文件的内容,使用mmap将文件映射到内存中是一个高效和优雅的方法.例如,无需打开一个文件并执行大量的seek(),read(),write()调用,只需要简单的 ...