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. 关于RTSP-Over-HTTP

    --------------------更新2018.07.10------------------- myRtspClient-1.3.0开始支持RTSP-Over-HTTP ----------- ...

  2. iOS UI基础-10.0 QQ聊天布局之键盘及文本使用

    要实现的效果:   这里只说用到的几个知识点 1.图片包含文字 在设置文字的Frame的时候,使用背景(按钮)的尺寸,文字使用了内边距 背景图片,使用拉伸 /** * 返回一张可以随意拉伸不变形的图片 ...

  3. 工具方法 获取远程IP

    java-code: public String getRemoteIP(HttpServletRequest request) { String clientIp = request.getHead ...

  4. 初识github之注册和基本概念

    通过大量的网络资源,我粗浅了解了GitHub是什么:一个开源的代码存储云平台,它的logo是一只 “章鱼猫(Octocat)”.那么开始学习GitHub第一部分——注册GitHub账号. 首先英文就让 ...

  5. git 语法

    $ git init  // 初始化一个Git仓库 会生成一个.git目录 $ git status   // 查看仓库的状态 $ git add .   // 将所有修改添加到暂存区 $git ad ...

  6. Django后台管理系统讲解及使用

    大家在创建Django项目后,在根路由urls.py文件中,会看到一行代码 from django.contrib import admin urlpatterns = [ url(r'^admin/ ...

  7. python中impyla包报'TSocket' object has no attribute 'isOpen'错误

    经搜索得知,是thrift-sasl的版本太高了(0.3.0),故将thrift-sasl的版本降级到0.2.1 pip install thrift-sasl==0.2.1 经测试impyla 可以 ...

  8. linux中使用另一用户打开拥有图形界面的程序

    在archlinux中使用oracle用户执行oui无法显示图形界面的问题.结果没解决,后来发现执行 xhost +si:localuser:oracle, 然后再使用oracle用户执行oui即可. ...

  9. [1]windows 内核情景分析---说明

    本文说明:这一系列文章(笔记)是在看雪里面下载word文档,现转帖出来,希望更多的人能看到并分享,感谢原作者的分享精神. 说明 本文结合<Windows内核情景分析>(毛德操著).< ...

  10. .NET Core Tools for Visual Studio 2015 安装失败

    You may be blocked from installing the .NET Core Tooling Preview 2 for Visual Studio 2015 installer ...