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. [Java in NetBeans] Lesson 08. If: conditional statement

    这个课程的参考视频和图片来自youtube. 主要学到的知识点有: 1. If-else statement if (x > 5) { System.out.println("Inpu ...

  2. nodejs+mysql入门实例（增）

    var userAddSql = 'INSERT INTO userinfo(id,username,pwd) VALUES(0,?,?)'; var userAddSql_Params = ['Wi ...

  3. 移动端--touch事件与点透问题

    也来说说touch事件与点击穿透问题: http://blog.csdn.net/alex8046/article/details/52299785

  4. 【cocos2d-js官方文档】事件分发监听机制（摘录）

    简介 游戏开发中一个很重要的功能就是交互,如果没有与用户的交互,那么游戏将变成动画,而处理用户交互就需要使用事件监听器了. 总概: 事件监听器(cc.EventListener) 封装用户的事件处理逻 ...

  5. System.ArgumentException: 目标数组的长度不够。请检查 destIndex 和长度以及数组的下限

    扫码支付接口将要上线,近几天在优化系统性能.昨天把日志Helper类的日志记录改成了使用Queue<T>对象来实现异步处理.做了单元测试,并模拟多线程来测试后,发现正常.今天将站点部署到准 ...

  6. ASP.Net Core 2.2 MVC入门到基本使用系列 (二)（转）

    本教程会对基本的.Net Core 进行一个大概的且不会太深入的讲解, 在您看完本系列之后, 能基本甚至熟练的使用.Net Core进行Web开发, 感受到.Net Core的魅力. 本教程知识点大体 ...

  7. php删除文件或文件夹

    <?php function deleteDir($dir) { if (!$handle = @opendir($dir)) { return false; } while (false != ...

  8. mysqldump导出数据

    如果导出的数据是乱码,需要制定--default-character-set= mysqldump -h wn-fala-v2-cluster.cluster-cczg3tb617nn.eu-cent ...

  9. 002-golang安装配置

    1.安装位置: 2.环境变量. path的值如下: 3.工作目录.

  10. Python全栈-day8-day9-函数1

    函数 day8 1.为什么需要函数 1)代码的组织结构不清晰,可读性差 2)需要重复使用某个功能时,需要重新编写成程序,重复率高 3)多处引用相同代码时,需要扩展功能的时候过于麻烦,工作量大 2.函数 ...