一、v-model指令

v-model 用来获取表单元素的值。对应input输入框获取的是输入的值，单选按钮、复选框、下拉框获取的是选择的状态。

使用v-model可以在表单控件或者组件上创建双向绑定。

代码示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>v-model指令</title>

    <!--引入vue.js-->

    <script src="node_modules/vue/dist/vue.js" ></script>

    <script>

       window.onload=function(){

           // 构建vue实例

           new Vue({

               el:"#my",

               data:{

                 inputValue:"hello world",

                 chkState:true, //默认为true

                 chkArray:["1"], //处理成组的复选框需要定义一个数组，对应每个CheckBox的value值,这里默认第二个选中

                 chkLists:[{displayName:"科普读物",value:"0"},

                           {displayName:"中小学教材",value:"1"},

                           {displayName:"计算机科学",value:"2"}],

                 rdoCheck:"1",

                 // 动态处理radio

                 radioLists:[{name:"Gender",value:"1",displayName:"男"},

                             {name:"Gender",value:"2",displayName:"女"}],

                 sectionValue:"香蕉", // 没有value值，默认值就是name的值

                 sectionValue1:"0",

                 optionLists:[{value:"0",displayName:"苹果"},

                             {value:"1",displayName:"香蕉"},

                             {value:"2",displayName:"葡萄"}]

               },

               // 方法

               methods:{

               },

               filters:{

                   toShowCheckBoxState:function(value){

                       return value==true?"选中":"未选中"

                   }

               }

           })

       }

    </script>

</head>

<body>

    <div id="my">

       <!--表单输入框 当inputValue的值为123的时候禁止输入-->

       <input type="text" v-model="inputValue" :disabled="inputValue==123">{{inputValue}}

       <!--复选框  v-model 当前的状态:true或者false-->

       <div>

           <input type="checkbox" v-model="chkState">当前选中状态:{{chkState | toShowCheckBoxState}}

       </div>

        <!--多个复选框 组  静态显示-->

        <div>

            <input type="checkbox" v-model="chkArray" value="0">唱歌

            <input type="checkbox" v-model="chkArray" value="1">跳舞

            <input type="checkbox" v-model="chkArray" value="2">打篮球

            <p>当前选中的value值:{{chkArray}}</p>

        </div>

        <!--复选框 动态显示-->

        <div>

            <ul>

                <li v-for="list in chkLists">

                    <input type="checkbox" v-model="chkArray" :value="list.value">{{list.displayName}}

                </li>

            </ul>

        </div>

        <!--单选框 静态显示 -->

        <div>

            <input type="radio" v-model="rdoCheck" name="Gender" value="1">男

            <input type="radio" v-model="rdoCheck" name="Gender" value="2">女

            <p>{{rdoCheck}}</p>

        </div>

         <!--单选框 动态显示-->

         <div>

             <ul>

                 <li v-for="list in radioLists">

                    <input type="radio" v-model="rdoCheck" :name="list.name" :value="list.value">{{list.displayName}}

                 </li>

             </ul>

            <p>{{rdoCheck}}</p>

        </div>

        <!--下拉框 静态显示 -->

        <div>

            <select v-model="sectionValue">

                <option>苹果</option>

                <option>香蕉</option>

                <option>葡萄</option>

            </select>

            <p>{{sectionValue}}</p>

        </div>

        <!--下拉框 静态显示 -->

        <div>

            <select v-model="sectionValue1">

                <option value="0">苹果</option>

                <option value="1">香蕉</option>

                <option value="2">葡萄</option>

            </select>

            <p>{{sectionValue1}}</p>

        </div>

        <!--下拉框 静态显示 -->

        <div>

            <select v-model="sectionValue1">

                <option v-for="list in optionLists" :value="list.value">{{list.displayName}}</option>

            </select>

            <p>{{sectionValue1}}</p>

        </div>

    </div>

</body>

</html>

二、v-model指令实例

下面代码利用v-model指令实现全选的功能：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>v-model指令</title>

    <!--引入vue.js-->

    <script src="node_modules/vue/dist/vue.js" ></script>

    <script>

        window.onload = function(){

    var vm =new Vue({

        el:'#my',

        data:{

            checkAll: {name:'全选',check:false},

            lists:[{name:'小米',check:true},

                    {name:'华为',check:false},

                    {name:'苹果',check:false},

                    {name:'中兴',check:false},

                    {name:'OPPO',check:false}]

        },

        methods: {

            checkAllChange:function(){

                vm.lists.forEach(function(item){

                    item.check = vm.checkAll.check;

                });

            },

            curChange:function(){

                //true的状态

                var curTure = this.lists.filter(function(item){

                    return item.check ==true;

                });

                curTure.length == this.lists.length ? this.checkAll.check = true : this.checkAll.check = false ;

            }

        }

    })

}

    </script>

</head>

<body>

    <div id='my'>

        <input type="checkbox" v-model="checkAll.check" @change="checkAllChange()">

        <label>{{checkAll.name}} {{checkAll.check}}</label>

        <ul>

            <li v-for="list in lists">

                <input type="checkbox" v-model="list.check"  @change="curChange()">

                <label>{{list.name}} {{list.check}}</label>

            </li>

        </ul>

    </div>

</body>

</html>

Vue.js常用指令：v-model的更多相关文章

  1. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  2. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  3. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  4. 【Vue】vue.js常用指令

    http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...

  5. 新人成长之入门Vue.js常用指令介绍（一）

    写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...

  6. Vue.js常用指令：v-for

    一.什么是v-for指令 在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素.也就是说可以使用v-for指令实现遍历功能,包括遍历数组.对象.数组对象等. 二.遍历数组 代码示例如下: ...

  7. Vue.js常用指令：v-on

    一.v-on指令 v-on指令在Vue.js中用来处理对应的事件.用法: v-on:事件类型="函数体" 例如:点击按钮的时候执行play事件 <button v-on:cl ...

  8. Vue.js常用指令：v-show和v-if

    一.v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏.v-show后面跟的是判断条件,语法如下: v-show="判断变量" 例如: v-show=&qu ...

  9. Vue.js常用指令：v-bind

    一.什么是v-bind指令 v-bind指令用于响应更新HTML特性,允许将一个或多个属性动态绑定到表达式.v-bind是应用在动态属性上面的. 二.语法 v-bind语法如下: v-bind:动态属 ...

随机推荐

  1. IBM NOTES

    归档含义 邮件容量超过指定的邮件服务器的容量时,会受到警告信息.选择 Archive-Settings 可以设置邮件备份的规则,把邮箱里的部分邮件转移到本地的另一个指定文件夹(如 图 4).当您需要做 ...

  2. Python3练习题系列（06）——各种符号总结

    Python3中的各种符号总结 1关键字 import keyword print(keyword.kwlist, end='\t') ['False', 'None', 'True', 'and', ...

  3. C++ 动态存储空间的分配和释放 new与malloc的区别

    使用new申请空间: 特点: 1.没有名字,只能通过指针间接访问它们. 2.从堆中申请空间 分类: 变量: 语法:指针变量 = new 类型名; Delete 指针变量 举例:int *p; p=ne ...

  4. Loadrunner11的安装方法和破解

    前提:我使用的是在虚拟机下安装32位win7系统,浏览器为IE8(为录制脚本做铺垫) LoadRunner,是一种预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式 ...

  5. BZOJ1395 : [Baltic2005]Trip

    建立新图,原图中每条边在新图中是点,新图中每个点的点权为$-e[i].c+e[i].b$,边权为$0$. 若$e[i].d\leq e[j].a$,则连一条$i$到$j$的单向边. 对于原图中每个点, ...

  6. 将java项目传输到centos7服务端

    http://www.xdowns.com/so.asp?keyword=flashfxp 下载flashfxp之后进行一系列配置即可 https://cloud.baidu.com/?from=co ...

  7. 喵哈哈村的魔法考试 Round #8 (Div.2) 题解

    喵哈哈村的美食面馆 签到题,就不停的if就好了. #include<bits/stdc++.h> using namespace std; string name[5]={"ni ...

  8. 你不知道的js

    1.<a>标签 (1)href属性包含超链接或超链接指向的URL或URL片段,URL 片段是哈希标记(#)前面的名称,哈希标记指定当前文档中的内部目标位置(HTML 元素的 ID).URL ...

  9. Linux系统管理员应该知道的journalctl知识

    在Systemd出现之前,Linux系统及各应用的日志都是分别管理的,Systemd开始统一管理了所有Unit的启动日志,这样带来的好处就是可以只用一个 journalctl命令,查看所有内核和应用的 ...

  10. 奇怪吸引子---LorenaMod1

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...