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. [LeetCode] 762. Prime Number of Set Bits in Binary Representation_Easy

    Given two integers L and R, find the count of numbers in the range [L, R] (inclusive) having a prime ...

  2. AFNetworking 源码解析

    3.0 之后,就取消了NSOperation的控制. 因为根据Apple Developer Document的文档 https://developer.apple.com/documentation ...

  3. 数据分析与挖掘 - R语言：贝叶斯分类算法（案例二）

    接着案例一,我们再使用另一种方法实例一个案例 直接上代码: #!/usr/bin/Rscript library(plyr) library(reshape2) #1.根据训练集创建朴素贝叶斯分类器 ...

  4. Kotlin sealed class

    密封类的概念对于我这种从古代语言进化到现代语言的老古董来说还是有点绕腾的啊! 1. 密封类用来表示受限的类继承结构 解释:类中 元素值限制在某一个集合之中 2. 密封类可以有子类,但是所有的子类都必须 ...

  5. Tortoisegit和GitHub使用入门

    作为一个Code人对于github并不陌生吧,记录下使用说明: gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub. 工具: git: ...

  6. LocalStorage存储和cookie存储

    localStorage是H5的新特性,主要用来本地存储,一般浏览器支持的大小是5M,不同浏览器会有所不同,解决了cookie存储空间不足的问题. 2.使用:     ⑴.存 if(!window.l ...

  7. C# 语言 - 一个优雅的分页实现

    这篇文章介绍分页对象的封装,如何优雅的对数据进行分页. 先上调用代码: 我们希望能在一个Enumerable对象后面直接.ToPagedList(pageIndex,pageSize)这样优雅的调用分 ...

  8. caffe神经网络中不同的lr_policy间的区别

    lr_policy可以设置为下面这些值,相应的学习率的计算为: - fixed:  保持base_lr不变. - step:  如果设置为step,则还需要设置一个stepsize,  返回 base ...

  9. CNN那么多的网络有什么区别吗？如何对CNN网络进行修改？

    https://www.zhihu.com/question/53727257/answer/136261195 http://blog.csdn.net/csmqq/article/details/ ...

  10. 准备mysql-connector-java

    下载mysql-connector-java:https://mvnrepository.com/artifact/mysql/mysql-connector-java 导入mysql-connect ...